Как дать тексту или изображению прозрачный фон с помощью 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 родителя.
34 ответа
Либо используйте полупрозрачное изображение PNG, либо используйте CSS3:
background-color:rgba(255,0,0,0.5);
Вот статья из css3.info, Непрозрачность, RGBA и компромисс (2007-06-03).
В 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>
Это лучшее решение, которое я мог придумать, НЕ используя 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> тег.)
Основное преимущество этой техники перед аналогичными перечисленными выше состоит в том, что панель не обязательно должна быть определенного размера; как написано выше, он будет соответствовать полной ширине (нормальная компоновка блочных элементов) и только так же высоко, как и содержимое. Внешний элемент панели может иметь любой размер, если вы пожелаете, при условии, что он прямоугольный (т.е. встроенный блок будет работать; обычный старый встроенный не будет).
Кроме того, это дает вам много свободы для фона; Вы можете свободно помещать что-либо в задний элемент, и это не повлияет на поток контента (если вам нужно несколько полноразмерных подслоев, просто убедитесь, что они также имеют положение: абсолютное, ширина / высота: 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>с вместо<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>А вот живая демонстрация широко используемой техники:
Существует хитрость для минимизации разметки: используйте псевдоэлемент в качестве фона, и вы можете установить его непрозрачность, не затрагивая основной элемент и его дочерние элементы:
Выход:
Соответствующий код:
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,
Просто откройте 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');
}
Этот метод позволяет вам иметь изображение на заднем плане, а не только сплошной цвет, и его можно использовать для обеспечения прозрачности других атрибутов, таких как границы. Нет прозрачных изображений 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 (используйте нулевые значения или более подходящие для ваших нужд).
Самый простой способ - использовать полупрозрачное фоновое изображение PNG.
Вы можете использовать JavaScript, чтобы он работал в Internet Explorer 6 Если вам нужно.
Я использую метод, описанный в прозрачных PNG в Internet Explorer 6.
Кроме этого,
Вы могли бы подделать это, используя two side-by-side sibling elements - сделать один полупрозрачный, затем absolutely position the other over the top?
Проблема в том, что текст на самом деле имеет полную непрозрачность в вашем примере. Он имеет полную непрозрачность внутри p тег, но p тег просто полупрозрачный.
Вы можете добавить полупрозрачное фоновое изображение PNG вместо того, чтобы реализовывать его в CSS, или разделить текст и разделить на 2 элемента и переместить текст по полю (например, отрицательное поле).
Иначе это будет невозможно.
РЕДАКТИРОВАТЬ:
Как говорил Крис: если вы используете PNG-файл с прозрачностью, вы должны использовать обходной путь JavaScript, чтобы он работал в надоедливом Internet Explorer...
Почти все эти ответы предполагают, что дизайнеру нужен сплошной цвет фона. Если дизайнер действительно хочет, чтобы фотография была фоновой, единственным реальным решением на данный момент является JavaScript, подобный плагину jQuery Transify, упомянутому в другом месте.
Нам нужно присоединиться к обсуждению в рабочей группе CSS и заставить их дать нам атрибут background-opacity! Он должен работать рука об руку с функцией нескольких фонов.
Вот как я это делаю (это может быть неоптимально, но это работает):
Создать div что вы хотите быть полупрозрачным. Дайте ему класс / идентификатор. Оставьте его пустым и закройте его. Задайте ему высоту и ширину (скажем, 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.
Если вы парень из 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**
}
Вот плагин jQuery, который будет обрабатывать все для вас, Transify ( Transify - плагин jQuery для простого применения прозрачности / непрозрачности к фону элемента).
Время от времени я сталкивался с этой проблемой, поэтому решил написать что-то, что облегчит жизнь. Сценарий занимает менее 2 КБ, для его работы требуется всего 1 строка кода, а также он будет обрабатывать анимацию прозрачности фона, если хотите.
Некоторое время назад я писал об этом в Cross Browser Background Transparency With CSS.
Причудливый Internet Explorer 6 позволит вам сделать фон прозрачным и сохранить текст поверх полностью непрозрачным. Для других браузеров я предлагаю использовать прозрачный файл PNG.
Непрозрачность фона, а не текста есть некоторые идеи. Либо используйте полупрозрачное изображение, либо наложите дополнительный элемент.
CSS3 имеет простое решение вашей проблемы. Использование:
background-color:rgba(0,255,0,0.5);
Здесь rgba означает красный, зеленый, синий и альфа-значение. Значение зеленого цвета получается из-за 255, а полупрозрачность получается из значения 0,5 альфа.
Чтобы фон элемента был полупрозрачным, но содержимое (текст и изображения) элемента непрозрачны. Вам нужно написать код CSS для этого изображения и добавить один атрибут с именем opacity с минимальным значением. например
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// чем меньше значение, тем больше будет прозрачность, или меньшее значение будет прозрачностью.
фоновый цвет: RGBA (255,0,0,0.5); как уже упоминалось выше, это лучший ответ. Сказать, что использовать CSS3, даже в 2013 году, непросто, поскольку уровень поддержки различных браузеров меняется с каждой итерацией.
В то время как background-color поддерживается всеми основными браузерами (не новы для CSS3) [1] прозрачность альфа может быть непростой задачей, особенно с Internet Explorer до версии 9 и с цветом рамки в Safari до версии 5.1. [2]
Использование чего-то вроде Compass или SASS может реально помочь в производстве и кроссплатформенности.
[1] W3Schools: свойство CSS background-color
[2] Блог Нормана: Контрольный список поддержки браузера CSS3 (октябрь 2012 г.)
Если вы используете меньше, вы можете использовать fade(color, 30%),
Вы можете решить это для 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: rgba(red, green, blue, alpha), где alpha это уровень прозрачности, который вы хотите. Нет необходимости в JavaScript или jQuery.
Вот пример:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
Вы можете сделать с
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><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>
На мой взгляд, лучший способ использовать цвет фона с непрозрачностью, если мы используем это, то мы не потеряем непрозрачность для других элементов, таких как тестовый цвет, границы и т. Д.
background-color: rgba(71,158,0,0.8);
Используйте цвет фона с непрозрачностью
фонового цвета: RGBA (R,G,B, Непрозрачность);
Вы можете использовать значение непрозрачности, добавленное к шестнадцатеричному значению:
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;
Вы можете использовать RGBA (red, green, blue, alpha) в CSS что-то вроде этого:
Так что просто сделайте что-то подобное, чтобы сработать в вашем случае:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Существует более простое решение - наложить оверлей поверх изображения на тот же элемент div. Это не правильное использование этого инструмента. Но работает как обаяние, чтобы сделать это наложение с использованием CSS.
Используйте тень от вставки, как это:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
Это все:)
У меня сработало при использовании формата #AARRGGBB так что на меня работал #1C00ff00. Попробуйте, потому что я видел, как у одних он работает, а у кого-то не работает. Я использую его в CSS.
Я согласен со всеми приведенными выше ответами, и 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;
}
Я думаю, что это дает вам желаемый результат:
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;
}