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

2426
Stijn Sanders 30 Апр 2009 в 13:00

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>
2324
8 revs, 7 users 36% 8 Сен 2019 в 14:23

В 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

480
8 revs, 7 users 42% 23 Май 2017 в 11:54

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

Для простого полупрозрачного цвета фона лучше всего подходят приведенные выше решения (изображения 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

65
Slipp D. Thompson 23 Фев 2020 в 06:20

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

57
Peter Mortensen 11 Апр 2016 в 18:59

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

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

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

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

22
Peter Mortensen 8 Сен 2019 в 14:24

Этот метод позволяет вам иметь изображение в фоновом режиме, а не только сплошной цвет, и может использоваться для обеспечения прозрачности других атрибутов, таких как границы. Прозрачные изображения 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 в 11:17

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

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

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

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

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

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

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

15
Community 23 Май 2017 в 12: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 в 14:28

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

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

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

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

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

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

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

9
Community 23 Май 2017 в 10: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**
}
9
Peter Mortensen 11 Апр 2016 в 18:55

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

Например,

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

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

8
Peter Mortensen 8 Сен 2019 в 14:44

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

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

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

7
Peter Mortensen 8 Сен 2019 в 14:41

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

6
Peter Mortensen 11 Апр 2016 в 19: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 г.)

6
Community 20 Июн 2020 в 09: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')";
4
Peter Mortensen 11 Апр 2016 в 18:54

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

Вот пример:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
4
Peter Mortensen 11 Апр 2016 в 18:57
<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 в 11:05

Вы можете сделать это с помощью 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
Peter Mortensen 8 Сен 2019 в 16:19

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

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

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

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

Enter image description here

2
Peter Mortensen 8 Сен 2019 в 16:22

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

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

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

Вот и все :)

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

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

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

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

span {
  color: white;
}
1
Peter Mortensen 8 Сен 2019 в 16: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 в 13: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 в 16:16

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

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

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

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

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

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