Как придать тексту или изображению прозрачный фон с помощью 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   2035   2009-04-30 13:00:02

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"), который содержит содержимое и помогает определить размер панели.

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

вы можете использовать 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 что вы хотите быть полупрозрачным. Дайте ему класс/идентификатор. Оставьте его пустым и закройте. Дайте ему заданную высоту и ширину (скажем, 300 пикселей на 300 пикселей). Дайте ему непрозрачность 0,5 или что угодно, и цвет фона.

затем, непосредственно под этим div, создайте другой div с другим классом/идентификатором. Создайте абзац внутри него, где вы разместите свой текст. Дайте 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 году, не просто, потому что уровень поддержки от различных браузеров меняется с каждой итерацией.

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

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


[1] W3Schools: CSS background-color Property

[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);
  }