Как передать текст или изображение прозрачным фоном с помощью 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 родительского элемента.

2066
задан Stijn Sanders 30 апр. '09 в 12:00
источник поделиться
29 ответов

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

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

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

2161
ответ дан Georg Schölly 30 апр. '09 в 12:52
источник поделиться

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

461
ответ дан Sebastian Markbåge 21 мая '09 в 7:07
источник поделиться

Это лучшее решение, которое я мог бы придумать, НЕ используя 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>
101
ответ дан Gorkem Pacaci 13 июля '10 в 23:51
источник поделиться

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

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

christmas-card-2009.slippyd.com screenshot

56
ответ дан Slipp D. Thompson 24 мая '10 в 19:07
источник поделиться

Лучше использовать полупрозрачный .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');
}
55
ответ дан Gelens 30 апр. '09 в 23:42
источник поделиться

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

DEMO

Вывод:

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

50
ответ дан web-tiki 05 окт. '14 в 11:15
источник поделиться

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

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

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

Кроме этого,

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

23
ответ дан Chris 30 апр. '09 в 12:11
источник поделиться

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

21
ответ дан frozenkoi 14 янв. '12 в 3:14
источник поделиться

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

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

15
ответ дан thinsoldier 26 янв. '11 в 19:36
источник поделиться

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

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

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

EDIT:

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

14
ответ дан SvenFinke 30 апр. '09 в 12:14
источник поделиться

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

Создайте 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.

13
ответ дан paris ionescu 05 авг. '09 в 1:07
источник поделиться

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

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

12
ответ дан joren 25 окт. '10 в 16:55
источник поделиться

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

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

10
ответ дан philnash 30 апр. '09 в 12:52
источник поделиться

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

10
ответ дан fearoffours 30 апр. '09 в 12:13
источник поделиться

Если вы парень 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
ответ дан suraj rawat 07 авг. '14 в 5:39
источник поделиться

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

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

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

7
ответ дан Pushp Singh 03 июня '16 в 15:09
источник поделиться

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

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

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

7
ответ дан Touhid Rahman 21 мая '13 в 2:36
источник поделиться

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

7
ответ дан DragonBear 08 янв. '13 в 23:00
источник поделиться

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

6
ответ дан alex 03 июня '15 в 10:28
источник поделиться

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

Вот пример:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
4
ответ дан user3968801 14 сент. '14 в 22:21
источник поделиться

Вы можете решить это для 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
ответ дан Henrik 06 дек. '13 в 17:40
источник поделиться
<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 нояб. '14 в 13:47
источник поделиться

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

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

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

Что все:)

1
ответ дан edd2110 29 дек. '15 в 19:25
источник поделиться

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

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

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

span {
  color: white;
}
1
ответ дан Alireza 20 окт. '17 в 5:41
источник поделиться

Вы можете сделать с 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
ответ дан Rudra 22 мая '18 в 9:10
источник поделиться

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

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

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

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

enter image description here

0
ответ дан Vinod Kumar 12 дек. '18 в 10:29
источник поделиться

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

.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 */
}
0
ответ дан Cengkuru Michael 11 февр. '17 в 11:00
источник поделиться

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

<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 указывает прозрачность для цвета.

-1
ответ дан parag patel 19 июня '18 в 1:48
источник поделиться

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

div{
  background:rgba(63,245,0,0.5);
  }
-2
ответ дан Vijay Sharma 29 дек. '17 в 12:40
источник поделиться

Другие вопросы по меткам или Задайте вопрос