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

2169

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

  • 15
    К сожалению, нет, CSS3 стремится исправить это с помощью нового цветового модуля, он позволит вам указывать альфа-значение всякий раз, когда вы указываете цвет. w3.org/TR/css3-color
  • 69
    На самом деле непрозрачность дочерних элементов умножается на непрозрачность родительского элемента, а не переопределяется. Так, например, если непрозрачность p равнялась .6 а непрозрачность span была .5 тогда истинная непрозрачность текста в промежутке была бы 0.3 .
Показать ещё 7 комментариев
Теги:
opacity

29 ответов

2053
Лучший ответ

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

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

Вот статья css3.info, Opacity, RGBA и компромисс (2007-06-03).

  • 80
    возможно ли сделать это с помощью шестнадцатеричных цветов? Нравится #fff?
  • 45
    @grm javascripter.net/faq/hextorgb.htm
Показать ещё 12 комментариев
484

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

Изображение 2572Изображение 2573Изображение 2574Изображение 2575

  • 1
    Но не в IE8. Я попробовал новый синтаксис -ms-фильтра, но он все еще не работал для меня :(
  • 0
    @philfreo: Это хорошо сработало для меня в IE8.
Показать ещё 8 комментариев
96

Это лучшее решение, которое я мог бы придумать, НЕ используя 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>
  • 19
    Он сказал: «Не разделяя текст и фон на два элемента, расположенных друг над другом». В любом случае, это хорошее исправление и полезно, но в некоторых случаях вы бы хотели, чтобы непрозрачный элемент был дочерним по отношению к полупрозрачному.
  • 0
    Я ответил примерно так же на другой вопрос SO, но добавил jsfiddle и скриншоты (IE7 +), смотрите здесь, если интересно stackoverflow.com/a/21984546/759452
Показать ещё 2 комментария
58

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

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

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

Более полная демонстрация, демонстрирующая гибкость этой техники, используя ее в тандеме с display: inline-block, и с auto и определенной width 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>

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

Изображение 2576

  • 0
    В какой ситуации не хочется использовать CSS3 для этого?
  • 0
    @ Burkely91 Если вы можете сделать это в CSS3, то обязательно используйте это. Но CSS3 фон не поддерживает все типы контента и гибкость полного макета. Приведенный выше пример конверта / буквы будет трудно осуществить с помощью CSS3 из-за независимо повторяющихся краев и заполнения по центру. Также имейте в виду, что этот ответ изначально был написан 5 лет назад, до того, как была широко распространена поддержка CSS3.
Показать ещё 3 комментария
53

Лучше использовать полупрозрачный .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');
}
  • 13
    Вы также можете использовать paint.net .
52

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

DEMO

Вывод:

Изображение 2577

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

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

22

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

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

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

Кроме этого,

вы можете подделать его с помощью two side-by-side sibling elements - сделать один полупрозрачный, затем absolutely position the other over the top?

  • 2
    Все, что мне нужно, это простой цвет фона, какой размер PNG вы бы предложили мне создать с этим цветом? 1x1 заставит рендеринг выполнять большую работу, слишком много пикселей делает этот PNG довольно большим (размер файла должен быть нормальным, так как он сжат, но все равно рендеринг должен распаковывать, чтобы использовать его) ...
  • 3
    Я бы порекомендовал что-то вроде 30px x 30px, которое использует меньше памяти при рендеринге, чем 1x1, и все еще достаточно мало, чтобы минимизировать использование полосы пропускания.
20

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

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

Пример (fiddle) (обратите внимание, что 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 (используйте значения нуля или что-то более подходящее для ваших нужд).

15

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

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

14

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

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

В противном случае это будет невозможно.

EDIT:

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

13

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

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

Затем, НЕПОСРЕДСТВЕННО НИЖЕ, что div, создайте еще один div с другим классом /id. Создайте абзац внутри него, где вы разместите свой текст. Дайте div позицию: relative и top: -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.

  • 0
    Можно избежать лишнего элемента и вместо этого использовать псевдоэлемент, такой как :before или :after
12

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

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

10

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

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

10

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

9

Если вы парень 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**
}
7

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

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

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

  • 0
    Это один из способов сделать это в современных браузерах. Я комбинирую это со значениями rgba как запасной вариант
  • 0
    Да исправить. Это один из способов борьбы с современным браузером.
7

У CSS3 есть легкое решение вашей проблемы. Использование:

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

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

7

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

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

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


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

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

6

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

4

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

Вот пример:

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

Вы можете решить это для 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')";
3
<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/?

1

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

Так просто сделайте что-нибудь подобное в своем случае:

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

span {
  color: white;
}
1

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

Используйте вложенную тень следующим образом:

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

Что все:)

0

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

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

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

фонового цвета: RGBA (R, G, B, Непрозрачность);

Изображение 2578

0

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

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

.transparent {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}
-2

Это наоборот, чтобы сделать это для фона изображений.

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

И эти классы должны быть определены в теге стиля.

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

для цветного фона просто определите цвет фона с помощью rgba (255, 240, 215, 0,5), где 0,5 указывает прозрачность для цвета.

-2

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню