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

27 ответов


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

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

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


В Firefox 3 и Safari 3 Вы можете использовать RGBA как Георг Schölly упомянул.

малоизвестный трюк заключается в том, что вы можете использовать его в 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


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

поместите контейнер DIV и два дочерних DIVs на одном уровне, один для содержимого, один для фона. И используя CSS, автоматический размер фона, чтобы соответствовать содержимому и поместить фон на самом деле в спину с помощью z-индекса.

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

лучше использовать полупрозрачный .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');
}

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

техника работает с помощью двух "слоев" внутри наружной панели элемента:

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

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

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

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

и вот live demo широко используемой техники:

christmas-card-2009.slippyd.com screenshot


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

демо

выход:

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 и позже.


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

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

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

кроме этого,

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


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

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


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

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


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

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

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

EDIT:

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


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

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

затем, непосредственно под этим div, создайте другой div с другим классом/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.


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

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


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


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

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


Если вы 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**
}

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

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

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


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

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


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

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

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


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

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

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


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


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

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

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

вот пример:

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

<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/?


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

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

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

вот и все :)


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

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

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

span {
  color: white;
}

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

.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 */
}

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

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

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