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

Думаю, это даст вам желаемый результат:

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

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

function hexToRgba(hex,alpha) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if(result!=null){
      const r = parseInt(result[1], 16);
      const g = parseInt(result[2], 16);
      const b = parseInt(result[3], 16);
      //
      return `rgba(${r},${g},${b},${alpha})`;

    }
    return null;
  }

Поскольку многие люди будут приходить сюда, желая узнать, как настроить непрозрачность любого элемента (не только фона), это так же просто, как добавить opacity: 0.2 (или любое желаемое число от 0 до 1) в CSS этого элемента.

Пример

.myclass {
  color: #eb4746;
  opacity: 0.2;
}

Может использоваться в фонах и в заголовках, абзацах и т. Д.

Это дает желаемый результат -

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .8;
}

Настройка непрозрачности фона.

Вы можете использовать значение непрозрачности, добавленное к шестнадцатеричному значению:

background-color: #11ffeeaa;

В этом примере aa - непрозрачность. Непрозрачность 00 означает прозрачный, а ff означает сплошной цвет.

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

background-color: #11ffee;

Вы также можете использовать старый способ с rgba():

background-color: rgba(117, 190, 218, 0.5);

И сокращение background, если вы хотите убедиться, что фон не имеет других стилей, таких как изображения или градиенты:

background: #11ffeeaa;

Из спецификации Mozilla (https://developer.mozilla.org/en-US/docs/Web/CSS/background-color):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

У меня это сработало при использовании формата #AARRGGBB, поэтому у меня работал #1C00ff00. Попробуйте, потому что я видел, как у одних он работает, а у кого-то не работает. Я использую его в CSS.

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

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

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

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

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

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

background-color: rgba(R, G, B, Opacity);

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

Вы можете использовать RGBA (red, green, blue, alpha) в CSS . Примерно так:

Итак, в вашем случае сработает просто выполнение чего-то вроде этого:

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

span {
  color: white;
}

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

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

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}

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

Например,

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

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

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

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

Используйте внутреннюю тень, например:

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

Вот и все :)

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

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

DEMO

Вывод:

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

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

• псевдоэлементы
• opacity

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

Вот пример:

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

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

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

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

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

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

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

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

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

[1] W3Schools: CSS свойство background-color

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

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

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

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

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

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

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

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

Кроме того, это дает вам много свободы для фона; вы можете поместить что угодно в задний элемент и не повлиять на поток контента (если вам нужно несколько полноразмерных подслоев, просто убедитесь, что у них также есть position: absolute, width / height: 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. Не используйте противоположное (поля на продолжении или отступ на панели), иначе вы обнаружите странности, такие как страница всегда немного шире, чем окно браузера.
• Как уже упоминалось, все должно быть блочным или строчно-блочным. Не стесняйтесь использовать <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>

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

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

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

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

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

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

Иначе это будет невозможно.

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

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

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

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

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

Кроме того, вы можете подделать его, используя два соседних элемента рядом друг с другом - сделайте один полупрозрачный , затем абсолютно поместите другой поверх .