Возможно ли, используя только CSS, сделать background элемента полупрозрачным, но сделать его содержимое (текст и изображения) непрозрачным?

Я бы хотел добиться этого без использования текста и фона как двух отдельных элементов.

При попытке:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Похоже, что дочерние элементы подвержены непрозрачности своих родителей, поэтому opacity:1 относительно opacity:0.6 родительского элемента.

2475
Stijn Sanders 30 Апр 2009 в 13:00
20
К сожалению, нет, CSS3 нацелен на исправление этого с помощью нового цветового модуля, он позволит вам указывать альфа-значение всякий раз, когда вы указываете цвет. w3.org/TR/css3-color
 – 
meandmycode
30 Апр 2009 в 13:34
75
Фактически, непрозрачность дочерних элементов умножается на непрозрачность родительского элемента, а не переопределяется. Так, например, если непрозрачность p была .6, а непрозрачность span была .5, то истинная непрозрачность текста в диапазоне была бы 0.3.
 – 
chharvey
3 Янв 2012 в 08:05
2
Думаю, да, но поскольку это полупрозрачный фон, вам даже не нужен фильтр / непрозрачность: codepen. io / anon / pen / ksJug
 – 
Stijn Sanders
18 Ноя 2013 в 17:20
7
Что должно произойти, если я определю opacity:.5 для родительского элемента и opacity:2 для дочернего элемента?
 – 
Alexander
4 Авг 2014 в 16:28
12
@ Александр, я рад, что вы задали этот вопрос. Математически можно было бы предположить, что ребенок вернется к непрозрачности, равной 1. Однако opacity:2; - это недопустимый CSS. Значение свойства opacity должно находиться в пределах включающего диапазона [0,1].
 – 
chharvey
6 Авг 2014 в 03:11

30 ответов

Лучший ответ

Либо используйте полупрозрачный PNG, либо SVG или используйте CSS:

background-color: rgba(255, 0, 0, 0.5);

Вот статья из css3.info, Непрозрачность, RGBA и компромисс (2007 г. - 06-03).


<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
2348
9 revs, 8 users 29% 19 Июл 2021 в 09:05
91
Можно ли это сделать с шестнадцатеричными цветами? Как #fff?
 – 
grm
14 Июл 2011 в 02:32
43
@grm: W3C рассматривал возможность введения формата шестнадцатеричного кода #RRGGBBAA, но они решили этого не делать (по разным причинам), поэтому мы не можем.
 – 
outis
15 Дек 2012 в 10:59
101
С помощью SASS вы можете, background-color: rgba(#000, .5);
 – 
Jürgen Paul
30 Май 2013 в 04:34
2
Стоит отметить, что если вы хотите использовать прозрачность, каждый браузер, поддерживающий RGBA, также поддерживает HSLA, т. Е. гораздо более интуитивно понятное отображение цветов. IE8 - единственный псевдозначимый браузер, который не поддерживает его, поэтому, если это не так, используйте HSL (A) для каждого цвета.
 – 
iono
28 Ноя 2013 в 12:17
26
 – 
BoltClock
26 Фев 2015 в 22:01

Это лучшее решение, которое я мог придумать, НЕ используя CSS 3. И, насколько я могу судить, оно отлично работает в Firefox, Chrome и Internet Explorer.

Поместите контейнер div и два дочерних элемента div на одном уровне: один для содержимого, другой для фона. А с помощью CSS автоматически измените размер фона, чтобы он соответствовал содержимому, и поместите фон фактически сзади с помощью z-index.

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>
115
Yashwardhan Pauranik 31 Май 2020 в 20:57
19
Он сказал: «Не разделяя текст и фон на два элемента, расположенных друг над другом». В любом случае, спасибо, это хорошее исправление и полезно, но в некоторых случаях вы хотите, чтобы непрозрачный элемент был дочерним по отношению к полупрозрачному.
 – 
Rolf
19 Дек 2010 в 20:24
Я ответил почти так же на другой вопрос SO, но добавил jsfiddle и доказательства скриншотов (IE7 +), см. Здесь, если интересно, stackoverflow.com/a / 21984546/759452
 – 
Adrien Be
25 Фев 2014 в 21:40
Пакачи: убедитесь, что свойства непрозрачности "действительно" кроссбраузерны, вы можете использовать этот фрагмент кода из CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity
 – 
Adrien Be
27 Фев 2014 в 17:40

Для простого полупрозрачного цвета фона лучше всего подходят приведенные выше решения (изображения CSS3 или bg). Однако, если вы хотите сделать что-то более интересное (например, анимацию, несколько фонов и т. Д.), Или если вы не хотите полагаться на CSS3, вы можете попробовать «технику панелей»:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

Техника работает с использованием двух «слоев» внутри элемента внешней панели:

  • один («задний»), который соответствует размеру элемента панели, не влияя на поток содержимого,
  • и один («продолжение»), который содержит контент и помогает определить размер панели.

position: relative на панели важен; он сообщает заднему слою, чтобы он соответствовал размеру панели. (Если вам нужно, чтобы тег <p> был абсолютным, измените панель с <p> на <span> и заключите все это в тег <p> с абсолютной позицией.)

Основное преимущество этого метода перед аналогичными, перечисленными выше, заключается в том, что панель не обязательно должна быть определенного размера; как указано выше, он будет соответствовать всей ширине (нормальный макет блочных элементов) и будет соответствовать только содержимому. Размер элемента внешней панели может быть любым, если только он прямоугольный (т.е. встроенный блок будет работать; простой старый встроенный - нет).

Кроме того, это дает вам много свободы для фона; вы можете поместить что-нибудь в задний элемент, и это не повлияет на поток контента (если вам нужно несколько полноразмерных подслоев, просто убедитесь, что у них также есть position: absolute, width / height: 100%, и вверху / внизу / слева / справа: авто).

Один из вариантов, позволяющий регулировать вставку фона (через верх / низ / лево / право) и / или закрепление фона (путем удаления одной из пар слева / справа или сверху / снизу), заключается в использовании вместо этого следующего CSS:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Как написано, это работает в Firefox, Safari, Chrome, IE8 + и Opera, хотя IE7 и IE6 требуют дополнительных CSS и выражений, IIRC, и в последний раз, когда я проверял, второй вариант CSS не работает в Opera.

На что следует обратить внимание:

  • Плавающие элементы внутри слоя cont не будут содержаться. Вам нужно убедиться, что они очищены или содержатся иным образом, иначе они выскользнут из-под дна.
  • Поля размещаются на элементе панели, а отступы - на элементе cont. Не используйте противоположное (поля на продолжении или отступ на панели), иначе вы обнаружите странности, такие как страница всегда немного шире, чем окно браузера.
  • Как уже упоминалось, все должно быть блочным или строчно-блочным. Не стесняйтесь использовать <div> вместо <span> для упрощения вашего CSS.

Более полная демонстрация, демонстрирующая гибкость этой техники за счет использования ее в тандеме с display: inline-block, а также с auto и определенными width s / min-height s / min-height s:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

А вот a> широко используемой техники:

christmas-card-2009.slippyd.com screenshot

66
Slipp D. Thompson 23 Фев 2020 в 09:20
В какой ситуации нельзя использовать для этого CSS3?
 – 
Burkely91
14 Июн 2015 в 05:23
Если вы можете сделать это в CSS3, тогда обязательно используйте это. Но фон CSS3 не поддерживает ни все типы контента, ни полную гибкость макета. Приведенный выше пример конверта / письма было бы сложно реализовать с помощью CSS3 из-за независимо повторяющихся краев и заливки по центру. Также имейте в виду, что этот ответ был первоначально написан 5 лет назад, до того, как поддержка CSS3 получила широкое распространение.
 – 
Slipp D. Thompson
4 Янв 2016 в 13:17
2
Иванча Откатил ваши изменения. Извините, изменение отступа с моей предпочтительной формы (вкладки) на вашу (2 пробела) не круто. У вас может быть веская причина использовать отступы в два пробела в ваших повседневных проектах кода, но для презентации в Интернете я считаю, что вкладки имеют явный выигрыш - более глубокие отступы позволяют легче различать уровни иерархии, а это далеко легче надежно преобразовать табуляции в пробелы, и поэтому это более совместимая форма для всех читателей.
 – 
Slipp D. Thompson
6 Фев 2016 в 14:07
Иванча Кроме того, похоже, вы запускали код с помощью средства украшения, которое помещало каждый селектор и свойство CSS в отдельную строку. Мои примеры были написаны с намеренным переносом строк и интервалом для логической группировки частей, которые читатель должен понимать вместе - например, большинство свойств width: и height: имеют общую линию, потому что они представляют собой конструкции одного типа и лучше понимаются как двухмерные формы, а не как пара одномерных ограничений. Кроме того, в некоторые строки изрядно упаковано, потому что это повторяющийся контент, который не так важно выставлять напоказ.
 – 
Slipp D. Thompson
6 Фев 2016 в 14:11
Ivancha. Логическая организация, группировка и стили чрезвычайно важны для написания разумного, понятного кода, как и для всех видов написания. Внесенные вами изменения были эквивалентны тому, что вы вошли в чью-то публикацию, удалили все разрывы абзацев и поставили принудительную новую строку после каждого предложения. Если вы хотите быть таким тупо педантичным в своей работе, хорошо, вы можете это сделать. Но, пожалуйста, не принижайте смысловой характер и выражение в работах других людей.
 – 
Slipp D. Thompson
6 Фев 2016 в 14:15

Лучше использовать полупрозрачный .png .

Просто откройте Photoshop, создайте пиксельное изображение 2x2 (выбор 1x1может вызвать ошибку Internet Explorer!), заполните его зеленым цветом и установите непрозрачность на вкладке «Слои» на 60%. Затем сохраните его и сделайте фоновым изображением:

<p style="background: url(green.png);">any text</p>

Конечно, он отлично работает, за исключением прекрасного Internet Explorer 6. Доступны исправления получше, но вот быстрый совет:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
58
Community 23 Май 2017 в 15:10

Существует прием, позволяющий минимизировать разметку: используйте псевдоэлемент в качестве фона, и вы можете установить для него непрозрачность, не затрагивая основной элемент и его дочерние элементы:

ДЕМО

Выход:

Background opacity with a pseudo element

Соответствующий код:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

Браузер поддерживает Internet Explorer 8 и более поздних версий.

58
Peter Mortensen 11 Апр 2016 в 21:59

Самый простой способ - использовать полупрозрачное фоновое изображение в формате PNG .

При необходимости вы можете использовать JavaScript, чтобы заставить его работать в Internet Explorer 6.

Я использую метод, описанный в Прозрачные PNG в Internet Explorer 6 .

Кроме того, вы можете подделать его, используя два расположенных рядом одноуровневых элемента - сделайте один полупрозрачным , а затем абсолютно расположите другой поверх < / em>.

22
Peter Mortensen 8 Сен 2019 в 17:24
2
Все, что мне нужно, это простой цвет фона. Какой размер PNG вы бы предложили создать с этим цветом? 1x1 заставит рендеринг выполнять много работы, слишком много пикселей делает этот PNG довольно большим (должен быть нормальным размером файла после сжатия, но все же для рендеринга необходимо распаковать его, чтобы использовать) ...
 – 
Stijn Sanders
30 Апр 2009 в 16:51
3
Я бы рекомендовал что-то вроде 30px x 30px, который использует меньше памяти при рендеринге, чем 1x1, и все же достаточно мал, чтобы минимизировать использование полосы пропускания.
 – 
Chris
30 Апр 2009 в 18:27

Этот метод позволяет вам иметь изображение в фоновом режиме, а не только сплошной цвет, и может использоваться для обеспечения прозрачности других атрибутов, таких как границы. Прозрачные изображения PNG не требуются.

Используйте :before (или :after) в CSS и присвойте им значение непрозрачности, чтобы элемент оставался с исходной непрозрачностью. Таким образом, вы можете использовать: before, чтобы создать фальшивый элемент и придать ему прозрачный фон (или границы), который вы хотите, и переместить его за контент, который вы хотите сохранить непрозрачным с помощью z-index.

Пример (скрипка) (обратите внимание, что DIV с классом dad просто для обеспечения контекста и контраста с цветами, этот дополнительный элемент на самом деле не нужен, и красный прямоугольник перемещается немного вниз и вправо, чтобы оставить видимым фон за элементом fancyBg):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

С этим CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

В этом случае .fancyBg:before имеет свойства CSS, которые вы хотите иметь с прозрачностью (красный фон в этом примере, но может быть изображением или границами). Он позиционируется как абсолютный, чтобы переместить его за .fancyBg (используйте нулевые значения или любые другие, более подходящие для ваших нужд).

21
Slipp D. Thompson 6 Фев 2016 в 14:17

Некоторое время назад я писал об этом в Кроссбраузерная прозрачность фона с помощью CSS.

Как ни странно, Internet Explorer 6 позволяет сделать фон прозрачным, а текст сверху полностью непрозрачным. Для других браузеров я предлагаю использовать прозрачный файл PNG.

11
Peter Mortensen 25 Май 2011 в 15:17

Непрозрачность фона, но не текста есть несколько идей . Либо используйте полупрозрачное изображение, либо наложите дополнительный элемент.

9
Community 23 Май 2017 в 13:31

Если вы любитель Photoshop, вы также можете использовать:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Или же:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
11
Peter Mortensen 11 Апр 2016 в 21:55

Чтобы сделать фон элемента полупрозрачным, но иметь непрозрачным содержимое (текст и изображения) элемента, вам нужно написать код CSS для этого изображения и добавить один атрибут с именем opacity с минимальным значением.

Например,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// Чем меньше значение, тем более прозрачным будет или меньше значение прозрачности.

8
Peter Mortensen 8 Сен 2019 в 17:44
Это один из способов сделать это в современных браузерах. Я комбинирую его со значениями rgba как запасной вариант
 – 
Trevor
14 Июл 2016 в 17:57
Да исправить. Это один из способов борьбы с современным браузером.
 – 
Pushp Singh
21 Июл 2016 в 16:05
Что вы имеете в виду под «или меньше значение будет прозрачностью» (это кажется непонятным)? (Ответьте, отредактировав свой ответ, а не здесь, в комментариях, если это уместно.)
 – 
Peter Mortensen
8 Сен 2019 в 17:44

CSS 3 предлагает простое решение вашей проблемы. Использовать:

background-color:rgba(0, 255, 0, 0.5);

Здесь rgba обозначает красный, зеленый, синий и альфа-значение. Значение зеленого цвета получается из-за 255, а половина прозрачности получается из-за значения альфа 0,5.

8
Peter Mortensen 8 Сен 2019 в 17:41

Если вы используете Less, вы можете использовать fade(color, 30%).

7
Peter Mortensen 11 Апр 2016 в 22:01

background-color: rgba (255, 0, 0, 0.5); , как упоминалось выше, - это лучший ответ, просто выраженный. Сказать, что использовать CSS 3, даже в 2013 году, непросто, потому что уровень поддержки со стороны различных браузеров меняется с каждой итерацией.

Хотя background-color поддерживается всеми основными браузерами (не впервые в CSS 3) [1], альфа-прозрачность может быть сложной, особенно в Internet Explorer до версии 9 и с цветом границы в Safari до версии 5.1. [2]

Используя что-то вроде Compass или SASS действительно может помочь в производственной и кросс-платформенной совместимости.


[1] W3Schools: свойство цвета фона CSS

[2] Блог Нормана: контрольный список поддержки браузера CSS3 (октябрь 2012 г.)

7
Community 20 Июн 2020 в 12:12

Вы можете решить эту проблему для Internet Explorer 8, используя (ab) синтаксис градиента. Цветовой формат - ARGB. Если вы используете препроцессор Sass, вы можете преобразовывать цвета с помощью встроенной функции "ie-hex-str ()".

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
5
Peter Mortensen 11 Апр 2016 в 21:54

Вы можете использовать чистый CSS 3: rgba(red, green, blue, alpha), где alpha желаемый уровень прозрачности. Нет необходимости в JavaScript или jQuery.

Вот пример:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
5
Peter Mortensen 11 Апр 2016 в 21:57

Вы можете сделать это с помощью rgba color code, используя CSS, как в примере, приведенном ниже.

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>
3
Peter Mortensen 8 Сен 2019 в 19:19

С моей точки зрения, лучший способ использовать цвет фона с непрозрачностью - как показано ниже. Если мы используем это, мы не потеряем непрозрачность для других элементов, таких как тестовый цвет, граница и т. Д.

background-color: rgba(71, 158, 0, 0.8);

Используйте цвет фона с непрозрачностью

background-color: rgba(R, G, B, Opacity);

Enter image description here

3
Peter Mortensen 8 Сен 2019 в 19:22

Есть более простое решение - наложить оверлей на изображение в том же div. Это неправильное использование этого инструмента. Но работает как шарм, создавая этот оверлей с помощью CSS.

Используйте внутреннюю тень, как это:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

Вот и все :)

1
Peter Mortensen 11 Апр 2016 в 22:00

Вы можете использовать RGBA (red, green, blue, alpha) в CSS . Что-то вроде этого:

Так что в вашем случае просто сделайте что-то вроде этого:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
2
Peter Mortensen 8 Сен 2019 в 19:17

Вы можете использовать значение непрозрачности, добавленное к шестнадцатеричному значению:

background-color: #11ffeeaa;

В этом примере aa - непрозрачность. Непрозрачность 00 означает прозрачный, а ff означает сплошной цвет.

Непрозрачность не является обязательной, поэтому вы можете использовать шестнадцатеричное значение как всегда:

background-color: #11ffee;

Вы также можете использовать старый способ с rgba():

background-color: rgba(117, 190, 218, 0.5);

И сокращение background, если вы хотите убедиться, что фон не имеет других стилей, таких как изображения или градиенты:

background: #11ffeeaa;

Из спецификации Mozilla (https://developer.mozilla.org / en-US / docs / Web / CSS / background-color):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
1
AMS777 21 Апр 2020 в 16:44

Обычно я использую этот класс в своей работе. Это очень хорошо.

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}
0
Peter Mortensen 8 Сен 2019 в 19:16

У меня это сработало при использовании формата #AARRGGBB, поэтому у меня работал #1C00ff00. Попробуйте, потому что я видел, как у одних он работает, а у кого-то не работает. Я использую его в CSS.

0
Donald Shahini 12 Мар 2020 в 11:01

Это дает желаемый результат -

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .8;
}

Установка непрозрачности фона.

0
Siddhant Jain 22 Авг 2020 в 20:41

В Firefox 3 и Safari 3 вы можете использовать RGBA, например Георга Шёлли упоминается.

Малоизвестный трюк заключается в том, что вы можете использовать его и в Internet Explorer, используя фильтр градиента.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Первое шестнадцатеричное число определяет альфа-значение цвета.

Полное решение для всех браузеров:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Это из прозрачность фона CSS без влияния на дочерние элементы с помощью RGBa и фильтров .

Скриншоты, подтверждающие результаты:

Это при использовании следующего кода:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11 IE9 IE8

481
8 revs, 7 users 42% 23 Май 2017 в 14:54
5
В этом сообщении показано, как это сделать в IE8: robertnyman.com/2010/01/11/…
 – 
Slapout
20 Авг 2010 в 18:20
14
: Если вы измените первый бит кода Себастьяна на «background: rgb (0, 0, 0) transparent;» теперь он должен работать в IE8. Это беспокоило меня довольно долгое время!
 – 
Tom Chantler
8 Фев 2011 в 02:10
Filter: progid Отлично работает с IE 9. Цвета: прозрачность, красный, зеленый, синий - все двузначные шестнадцатеричные значения.
 – 
Thorsten Niehues
6 Авг 2012 в 13:05
background: rgb(0, 0, 0) transparent; не имеет смысла , поскольку transparent переопределяет резервный цвет (0,0,0) и делает фон на 100% прозрачным. Мы стремимся к полупрозрачности, поэтому в зависимости от вашего дизайна резервный вариант должен быть либо сплошным (background: rgb(0, 0, 0);), либо полностью прозрачным (background: transparent;).
 – 
user664833
7 Фев 2013 в 03:22
1
- Я отредактировал ваш ответ согласно вашим инструкциям. К сожалению, я какое-то время был вне зоны внимания этого конкретного вопроса и ответа, поэтому сейчас я не могу добавить к этому разговору.
 – 
user664833
27 Фев 2014 в 23:41
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/?

3
premgowda 18 Ноя 2014 в 14:05

Проблема в том, что в вашем примере текст на самом деле имеет полную непрозрачность. Он имеет полную непрозрачность внутри тега p, но тег p является полупрозрачным.

Вы можете добавить полупрозрачное фоновое изображение PNG вместо того, чтобы реализовывать его в CSS, или разделить текст и div на два элемента и переместить текст в поле (например, отрицательное поле).

Иначе это невозможно.

Как сказал Крис: если вы используете файл PNG с прозрачностью, вам нужно использовать обходной путь JavaScript, чтобы он работал в надоедливом Internet Explorer ...

16
Peter Mortensen 8 Сен 2019 в 17:25

Почти все эти ответы предполагают, что дизайнер хочет сплошной цветной фон. Если дизайнер действительно хочет, чтобы фотография использовалась в качестве фона, единственное реальное решение на данный момент - это JavaScript, такой как плагин jQuery Transify упоминается в другом месте.

Что нам нужно сделать, так это присоединиться к обсуждению рабочей группы CSS и заставить их дать нам атрибут background-opacity! Он должен работать рука об руку с функцией нескольких фонов.

15
Community 23 Май 2017 в 15:26

Вот как я это делаю (возможно, это не оптимально, но работает):

Создайте div, который вы хотите сделать полупрозрачным. Дайте ему класс / идентификатор. Оставьте его пустым и закройте. Задайте ему заданную высоту и ширину (скажем, 300 на 300 пикселей). Задайте для него непрозрачность 0,5 или как вам нравится и цвет фона.

Затем непосредственно под этим div создайте еще один div с другим классом / идентификатором. Создайте внутри абзац, где вы разместите свой текст. Задайте div положение: относительное и верхнее: -295px (это минус 295 пикселей). Присвойте ему z-index 2 для хорошей оценки и убедитесь, что его непрозрачность равна 1. Оформите абзац так, как вам нравится, но убедитесь, что размеры меньше, чем у первого div, чтобы он не переполнялся. .

Вот и все. Вот код:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

Это работает в Safari 2.x, но я не знаю об Internet Explorer.

14
6 revs, 5 users 55%paris ionescu 8 Сен 2019 в 17:28
Дополнительного элемента можно избежать и вместо этого использовать псевдоэлемент, например :before или :after
 – 
frozenkoi
3 Ноя 2013 в 11:03

Вот плагин jQuery, который сделает все за вас, Transify ( Transify - плагин jQuery для простого применения прозрачности / непрозрачности к фону элемента ).

Время от времени я сталкивался с этой проблемой, поэтому решил написать что-нибудь, что сделало бы жизнь намного проще. Скрипт меньше 2 КБ, и для его работы требуется всего одна строка кода, и он также будет обрабатывать анимацию непрозрачности фона, если хотите.

12
Peter Mortensen 8 Сен 2019 в 17:34