Как дать тексту или изображению прозрачный фон с помощью CSS?

Можно ли, используя только 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родительского элемента.

30.04.2009 09:00:02
К сожалению, нет, CSS3 стремится исправить это с помощью нового цветового модуля, он позволит вам указывать альфа-значение всякий раз, когда вы указываете цвет. w3.org/TR/css3-color
meandmycode 30.04.2009 09:34:15
На самом деле непрозрачность дочерних элементов умножается на непрозрачность родительского элемента, а не переопределяется. Так, например, если бы pнепрозрачность была, .6а spanнепрозрачность была, .5тогда истинная непрозрачность текста в промежутке была бы 0.3.
chharvey 3.01.2012 04:05:48
Думаю, что так как фон прозрачен, вам даже не нужен фильтр / непрозрачность: codepen.io/anon/pen/ksJug
Stijn Sanders 18.11.2013 13:20:14
@chharvey, что должно произойти, если я определю opacity:.5для родителя и opacity:2для дочернего элемента?
Alexander 4.08.2014 12:28:06
@ Александр, я рад, что ты задал этот вопрос. Математически можно было бы подозревать , что ребенок вернется обратно к непрозрачности 1. Однако, opacity:2;является недействительным CSS . Значение opacityсвойства должно быть в пределах включенного диапазона [0,1].
chharvey 5.08.2014 23:11:26
30 ОТВЕТОВ
РЕШЕНИЕ

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

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>

2272
8.09.2019 14:23:10
Возможно ли это сделать с помощью шестнадцатеричных цветов? Нравится #fff?
grm 13.07.2011 22:32:03
@grm: W3C рассматривал вопрос о введении формата шестнадцатеричного кода #RRGGBBAA, но они решили этого не делать (по разным причинам), поэтому мы не можем.
outis 15.12.2012 06:59:02
@grm с SASS Вы можете,background-color: rgba(#000, .5);
Jürgen Paul 30.05.2013 00:34:22
Стоит отметить, что если вы хотите использовать прозрачность, каждый браузер, поддерживающий RGBA, также поддерживает HSLA , который представляет собой гораздо более интуитивное отображение цветов. IE8 - единственный псевдосущественный браузер, который не поддерживает его, поэтому, если не брать в расчет, использовать HSL (A) для каждого цвета.
iono 28.11.2013 08:17:06
@outis: Хорошие новости, #RRGGBBAA теперь на 4-м уровне цвета .
BoltClock♦ 26.02.2015 19:01:50

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

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

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

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

23
8.09.2019 14:24:21
Все, что мне нужно, это простой цвет фона, какой размер PNG вы бы предложили мне создать с этим цветом? 1x1 заставит рендеринг выполнять большую работу, слишком много пикселей делает этот PNG довольно большим (размер файла должен быть нормальным, поскольку он сжат, но при этом рендеринг должен распаковывать, чтобы использовать его) ...
Stijn Sanders 30.04.2009 12:51:07
Я бы порекомендовал что-то вроде 30px x 30px, которое использует меньше памяти при рендеринге, чем 1x1, и все еще достаточно мало, чтобы минимизировать использование полосы пропускания.
Chris 30.04.2009 14:27:15

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

10
23.05.2017 10:31:36

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

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

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

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

17
8.09.2019 14:25:13

Некоторое время назад я писал об этом в Cross Browser Background Transparency With CSS .

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

11
25.05.2011 11:17:40

Лучше использовать полупрозрачный.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
23.05.2017 12:10: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>

Хром-33 IE11 IE9 IE8

476
23.05.2017 11:54:59
Но не в IE8. Я попробовал новый синтаксис -ms-фильтра, но он все еще не работал для меня :(
philfreo 11.11.2009 18:16:27
В этом посте показано, как это сделать в IE8: robertnyman.com/2010/01/11/…
Slapout 20.08.2010 14:20:05
@philfreo: Если вы измените первый бит кода Себастьяна на «background: rgb (0, 0, 0) transparent;» теперь он должен работать в IE8. Это беспокоило меня довольно долго!
Tom Chantler 7.02.2011 23:10:21
filter: progid Отлично работает с IE 9. Цвет: прозрачность, красный, зеленый, синий - все шестнадцатеричные значения из двух цифр.
Thorsten Niehues 6.08.2012 09:05:41
@AdrienBe - я отредактировал твой ответ согласно твоим инструкциям. К сожалению, я был вне пространства для этого конкретного Q & A в течение некоторого времени, поэтому я не могу добавить к этому разговору в настоящее время.
user664833 27.02.2014 19:41:13

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

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

Затем непосредственно под этим div создайте другой div с другим class / id. Создайте абзац внутри, где вы разместите свой текст. Задайте divположение: относительное и верхнее -295px( отрицательное 295 пикселей). Дайте ему z-индекс 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
8.09.2019 14:28:03
Дополнительного элемента можно избежать, и вместо этого используйте :before:after
frozenkoi 3.11.2013 07:03:45

Для простого полупрозрачного цвета фона лучше всего подходят вышеуказанные решения (изображения 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>тег был абсолютным, измените панель с a <p>на a <span>и оберните все это в <p>тег абсолютно позиции .)

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

Кроме того, это дает вам много свободы для фона; Вы можете свободно помещать что-либо в задний элемент, и это не повлияет на поток контента (если вам нужно несколько полноразмерных подслоев, просто убедитесь, что они также имеют положение: абсолютное, ширина / высота: 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. Не используйте противоположное (поля на продолжение или отступы на панели), иначе вы обнаружите странности, такие как страница всегда немного шире, чем окно браузера.
  • Как уже упоминалось, все это должно быть блоком или встроенным блоком. Не стесняйтесь использовать <div>s вместо <span>s, чтобы упростить ваш CSS.

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

.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>

А вот живая демонстрация широко используемой техники:

Christmas-card-2009.slippyd.com скриншот

64
23.02.2020 06:20:10
В какой ситуации не хочется использовать CSS3 для этого?
Burkely91 14.06.2015 02:23:45
@ Burkely91 Если вы можете сделать это в CSS3, то обязательно используйте это. Но CSS3 фон не поддерживает все типы контента и гибкость полного макета. Приведенный выше пример конверта / буквы будет трудно осуществить с помощью CSS3 из-за независимо повторяющихся краев и заполнения по центру. Также имейте в виду, что этот ответ изначально был написан 5 лет назад, до того, как была широко распространена поддержка CSS3.
Slipp D. Thompson 4.01.2016 10:17:38
@Igor Ivancha Откатил ваши изменения. Извините, изменение отступа с моей предпочтительной формы (вкладки) на вашу (2 пробела) не круто. У вас может быть веская причина использовать отступы в два пробела в ваших повседневных проектах, но для презентации в Интернете я считаю, что вкладки имеют явный выигрыш - более глубокие отступы облегчают распознавание уровней иерархии, и это далеко проще надежно преобразовывать вкладки в пробелы и поэтому является более совместимой формой для всех читателей.
Slipp D. Thompson 6.02.2016 11:07:05
@Igor Ivancha Кроме того, кажется, что вы запустили код, хотя beautifier, который помещает каждый селектор CSS и свойство в отдельной строке. Мои примеры были написаны с преднамеренным разрывом строк и интервалами для логической группировки фрагментов, которые должны быть понятны читателю - например, большинство width:& height:properties имеют общую линию, потому что они представляют собой один и тот же тип конструкции и лучше понимаются как двумерная форма, а не пара одномерных ограничений. Кроме того, некоторые строки содержат в себе достаточное количество, потому что это повторяющийся контент, который не так важен, чтобы хвастаться.
Slipp D. Thompson 6.02.2016 11:11:37
@Igor Ivancha Логическая организация, группировка и стилизация чрезвычайно важны для написания разумного, понятного кода, как и для всех видов написания. Изменения, которые вы внесли, были равносильны тому, что вы отправляете кому-то сообщение, удаляете все разрывы абзаца и ставите принудительный перевод строки после каждого предложения. Если вы хотите быть таким тупым педантиком в своей работе, хорошо, вы можете это сделать. Но, пожалуйста, не останавливайте семантический характер и выражение в работе других людей.
Slipp D. Thompson 6.02.2016 11:15:48

Это лучшее решение, которое я мог бы придумать, НЕ используя 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>

108
10.06.2019 11:45:41
Он сказал: «Не разделяя текст и фон на два элемента, расположенных друг над другом». В любом случае, это хорошее исправление и полезно, но в некоторых случаях вы бы хотели, чтобы непрозрачный элемент был дочерним по отношению к полупрозрачному.
Rolf 19.12.2010 17:24:54
Я ответил примерно так же на другой вопрос SO, но добавил jsfiddle и скриншоты (IE7 +), смотрите здесь, если интересно stackoverflow.com/a/21984546/759452
Adrien Be 25.02.2014 17:40:51
@Gorkem Pacaci: Убедитесь, что свойства непрозрачности «действительно» являются кросс-браузерными, вы можете использовать этот фрагмент кода из CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity
Adrien Be 27.02.2014 13:40:54
Почему бы не сделать это с помощью псевдоэлемента, например, :afterи избежать лишней разметки?
AndFisher 6.12.2016 09:07:36

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

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

12
8.09.2019 14:34:29

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

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

15
23.05.2017 12:26:38

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

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

Пример ( скрипка ) (обратите внимание, что DIVкласс with 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
6.02.2016 11:17:21

цвет фона: 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 background-color

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

6
16.01.2020 14:02:03

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

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

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

7
8.09.2019 14:41:28
Чем это отличается от некоторых предыдущих ответов?
Peter Mortensen 8.09.2019 14:41:57

Вы можете решить это для 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')";
4
11.04.2016 18:54:35

Если вы парень из 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**
}
9
11.04.2016 18:55:46

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

Вот пример:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
4
11.04.2016 18:57:20

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

DEMO

Вывод:

Непрозрачность фона с псевдоэлементом

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

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 и более поздние версии.

54
11.04.2016 18:59:43
<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
18.11.2014 11:05:59

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

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

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

Это все :)

1
11.04.2016 19:00:31

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

6
11.04.2016 19:01:24

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

Например,

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

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

8
8.09.2019 14:44:32
Это один из способов сделать это в современных браузерах. Я комбинирую это со значениями rgba как запасной вариант
Tahir Khalid 14.07.2016 14:57:19
Да исправить. Это один из способов борьбы с современным браузером.
Pushp Singh 21.07.2016 13:05:07
Что вы подразумеваете под «если ценность меньше будет прозрачностью» (это кажется непостижимым)? (Ответьте, отредактировав свой ответ , а не здесь, в комментариях, если это уместно.)
Peter Mortensen 8.09.2019 14:44:48

Вы можете использовать цвет RGB с непрозрачностью, например цветовой код в RGB (63, 245, 0), добавить непрозрачность (например, 63, 245, 0, 0,5), а также заменить RGB на RGBA. Aдолжен быть использован для непрозрачности.

div {
  background: rgba(63, 245, 0, 0.5);
}

-2
8.09.2019 15:26:32

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

.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
8.09.2019 16:16:12

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

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

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

span {
  color: white;
}
1
8.09.2019 16:17:44

Вы можете сделать это с 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>

2
8.09.2019 16:19:44

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

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

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

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

Введите описание изображения здесь

1
8.09.2019 16:22:48

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

0
12.03.2020 08:01:18

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

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;
0
21.04.2020 13:44:21