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

2283

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

html css opacity Стейн Сандерс
источник

16

К сожалению, нет, CSS3 стремится исправить это с помощью нового цветового модуля, он позволит вам указывать альфа-значение всякий раз, когда вы указываете цвет. w3.org/TR/css3-color

meandmycode

71

На самом деле непрозрачность дочерних элементов умножается на непрозрачность родительского элемента, а не переопределяется. Так, например, если бы pнепрозрачность была, .6а spanнепрозрачность была, .5тогда истинная непрозрачность текста в промежутке была бы 0.3.

Чарви

1

Думаю, это так, но поскольку фон прозрачный, вам даже не нужен фильтр / непрозрачность: codepen.io/anon/pen/ksJug

Stijn Sanders

5

@chharvey, что должно произойти, если я определю opacity:.5для родителя и opacity:2для дочернего элемента?

Александр

10

@ Александр, я рад, что ты задал этот вопрос. Математически можно было бы подозревать , что ребенок вернется обратно к непрозрачности 1. Однако, opacity:2;является недействительным CSS . Значение opacityсвойства должно быть в пределах включенного диапазона [0,1].

Чарви

2276

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

Развернуть фрагмент

Peter Mortensen
источник

86

возможно ли сделать это с помощью шестнадцатеричных цветов? Нравится #fff?

Grm

35

@grm: W3C рассматривал вопрос о введении формата шестнадцатеричного кода #RRGGBBAA, но они решили этого не делать (по разным причинам), поэтому мы не можем.

2012 г.

95

@grm с SASS Вы можете,background-color: rgba(#000, .5);

Юрген Пауль

2

Стоит отметить, что если вы хотите использовать прозрачность, каждый браузер, поддерживающий RGBA, также поддерживает HSLA , который представляет собой гораздо более интуитивно понятное отображение цветов. IE8 - единственный псевдосущественный браузер, который не поддерживает его, так что, за исключением этого, используйте HSL (A) для каждого цвета.

Ионо

19

@outis: Хорошие новости, #RRGGBBAA теперь на 4-м уровне цвета .

BoltClock

476

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

Хром-33 IE11 IE9 IE8

Adrien Be
источник

1

Но не в IE8. Я попробовал новый синтаксис -ms-фильтра, но он все еще не работал для меня :(

philfreo

5

В этом посте показано, как это сделать в IE8: robertnyman.com/2010/01/11/…

Slapout

14

@philfreo: Если вы измените первый бит кода Себастьяна на «background: rgb (0, 0, 0) transparent;» теперь он должен работать в IE8. Это беспокоило меня довольно долго!

Том Чантлер

filter: progid Отлично работает с IE 9. Цвет: прозрачность, красный, зеленый, синий - все шестнадцатеричные значения из двух цифр.

Торстен Ниехес

1

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

user664833

108

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

Развернуть фрагмент

Горкем Пакачи
источник

19

Он сказал: «Не разделяя текст и фон на два элемента, расположенных друг над другом». В любом случае, это хорошее исправление и полезно, но в некоторых случаях вы бы хотели, чтобы непрозрачный элемент был дочерним по отношению к полупрозрачному.

Рольф

Я ответил примерно так же на другой вопрос SO, но добавил jsfiddle и скриншоты (IE7 +), смотрите здесь, если интересно stackoverflow.com/a/21984546/759452

Adrien Be

@Gorkem Pacaci: Убедитесь, что свойства непрозрачности «действительно» являются кросс-браузерными, вы можете использовать этот фрагмент кода из CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity

Adrien Be

Почему бы не сделать это с помощью псевдоэлемента, как :afterи избежать дополнительной разметки?

AndFisher

64

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

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

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

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

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

Развернуть фрагмент

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

Слипп Д. Томпсон
источник

В какой ситуации никто не хотел бы использовать CSS3 для этого?

Burkely91

@ Burkely91 Если вы можете сделать это в CSS3, то обязательно используйте это. Но CSS3 фон не поддерживает все типы контента и гибкость полного макета. Приведенный выше пример конверта / буквы будет трудно осуществить с помощью CSS3 из-за независимо повторяющихся краев и заполнения по центру. Также имейте в виду, что этот ответ был изначально написан 5 лет назад, до того, как была широко распространена поддержка CSS3.

Слипп Д. Томпсон

2

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

Слипп Д. Томпсон

@Igor Ivancha Кроме того, кажется, что вы запустили код, хотя beautifier, который помещает каждый селектор CSS и свойство в отдельной строке. Мои примеры были написаны с намеренными разрывами строк и интервалами для логической группировки фрагментов, которые должны быть понятны читателю - например, большинство width:& height:properties имеют общую линию, потому что они представляют собой один и тот же тип конструкции и лучше понимаются как двумерная форма, а не пара одномерных ограничений. Кроме того, некоторые строки содержат в себе достаточное количество, потому что это повторяющийся контент, который не так важен, чтобы хвастаться.

Слипп Д. Томпсон

@Igor Ivancha Логическая организация, группировка и стилизация чрезвычайно важны для написания разумного, понятного кода, как и для всех видов написания. Изменения, которые вы внесли, были равносильны тому, что вы отправили кому-то сообщение, удалили все разрывы абзаца и поставили принудительный перевод новой строки после каждого предложения. Если вы хотите быть таким тупым педантиком в своей работе, хорошо, вы можете это сделать. Но, пожалуйста, не останавливайте семантический характер и выражение в работе других людей.

Слипп Д. Томпсон

58

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

Сообщество
источник

54

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

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

веб-Тики
источник

23

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

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

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

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

Крис
источник

2

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

Stijn Sanders,

3

Я бы порекомендовал что-то вроде 30px x 30px, которое использует меньше памяти при рендеринге, чем 1x1, и все еще достаточно мало, чтобы минимизировать использование полосы пропускания.

Крис

21

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

Используйте :before(или :after) в CSS и присвойте им значение непрозрачности, чтобы оставить элемент в исходной непрозрачности. Таким образом, вы можете использовать: before, чтобы создать искусственный элемент и придать ему прозрачный фон (или границы), который вы хотите, и переместить его за контент, который вы хотите сохранить непрозрачным.z-index .

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

frozenkoi
источник

17

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

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

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

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

SvenFinke
источник

15

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

Нам нужно присоединиться к обсуждению в рабочей группе CSS и дать им атрибут background-opacity! Он должен работать рука об руку с функцией нескольких фонов.

thinsoldier
источник

14

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

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

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

paris ionescu
источник

:before:after

Этого

12

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

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

joren
источник

11

Некоторое время назад я писал об этом в Cross Browser Background Transparency With CSS .

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

philnash
источник

10

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

fearoffours
источник

9

Если вы парень из 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**
}

Сурадж Рават
источник

8

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

Например,

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

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

Пуш Сингх
источник

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

Тахир Халид

Да исправить. Это один из способов борьбы с современным браузером.

Pushp Singh

Что вы подразумеваете под «если ценность меньше будет прозрачностью» (это кажется непостижимым)? (Ответьте, отредактировав свой ответ , а не здесь, в комментариях, если это уместно.)

Питер Мортенсен

7

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

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

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

Тухид Рахман
источник

Чем это отличается от некоторых предыдущих ответов?

Питер Мортенсен

6

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

Алекс
источник

6

цвет фона: 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 г.)

Уилл Нильсен
источник

4

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

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

Вот пример:

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

Питер Мортенсен
источник

3

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

premgowda
источник

2

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

Развернуть фрагмент

Рудра
источник

1

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

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

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

Это все :)

edd2110
источник

1

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

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

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

span {
  color: white;
}

Алиреза
источник

1

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

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

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

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

Винод Кумар
источник

0

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

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

Развернуть фрагмент

Ченгкуру Майкл
источник

0

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

Дональд Шахини
источник

0

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

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;

AMS777
источник

-2

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

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

Развернуть фрагмент

Виджай Шарма
источник

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

Ответы:

Скриншоты доказательства результатов:

Или: