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

html css opacity


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




Answer 1 Peter Mortensen


Либо используйте полупрозрачное изображение 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>




Answer 2 Adrien Be


В 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




Answer 3 Gorkem Pacaci


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




Answer 4 Slipp D. Thompson


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

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

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

Вещи,о которых нужно заботиться:

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




Answer 5 Community


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