Можно ли, используя только 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родительского элемента.
Либо используйте полупрозрачное изображение 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>background-color: rgba(#000, .5);Самый простой способ - использовать полупрозрачное фоновое изображение PNG .
Вы можете использовать JavaScript, чтобы он работал в Internet Explorer 6, если вам нужно.
Я использую метод, описанный в прозрачных PNG в Internet Explorer 6 .
Кроме этого, вы можете подделать его, используя два соседних элемента - сделать один полупрозрачным , а затем расположить другой абсолютно сверху .
Непрозрачность фона, а не текста есть некоторые идеи. Либо используйте полупрозрачное изображение, либо наложите дополнительный элемент.
Проблема в том, что текст на самом деле имеет полную непрозрачность в вашем примере. Он имеет полную непрозрачность внутри pтега, но pтег просто полупрозрачен.
Вы можете добавить полупрозрачное фоновое изображение PNG вместо того, чтобы реализовывать его в CSS, или разделить текст и разделить его на два элемента и переместить текст по полю (например, отрицательное поле).
Иначе это будет невозможно.
Как упоминал Крис: если вы используете PNG-файл с прозрачностью, вы должны использовать обходной путь JavaScript, чтобы заставить его работать в надоедливом Internet Explorer ...
Некоторое время назад я писал об этом в Cross Browser Background Transparency With CSS .
Причудливый Internet Explorer 6 позволит вам сделать фон прозрачным и сохранить текст поверх полностью непрозрачным. Для других браузеров я предлагаю использовать прозрачный файл PNG.
Лучше использовать полупрозрачный.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');
}В 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>
Вот как я это делаю (это может быть не оптимально, но работает):
Создайте то, 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.
:before:afterДля простого полупрозрачного цвета фона лучше всего подходят вышеуказанные решения (изображения 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>тег был абсолютным, измените панель с a <p>на a <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>s вместо<span>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>А вот живая демонстрация широко используемой техники:
width:& height:properties имеют общую линию, потому что они представляют собой один и тот же тип конструкции и лучше понимаются как двумерная форма, а не пара одномерных ограничений. Кроме того, некоторые строки содержат в себе достаточное количество, потому что это повторяющийся контент, который не так важен, чтобы хвастаться. Это лучшее решение, которое я мог бы придумать, НЕ используя 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>:afterи избежать лишней разметки? Вот плагин jQuery, который будет обрабатывать все для вас, Transify ( Transify - плагин jQuery для простого применения прозрачности / непрозрачности к фону элемента ).
Время от времени я сталкивался с этой проблемой, поэтому решил написать что-то, что облегчит жизнь. Сценарий занимает менее 2 КБ, и для его работы требуется всего одна строка кода, а также он будет обрабатывать анимацию прозрачности фона, если хотите.
Почти все эти ответы предполагают, что дизайнеру нужен сплошной цвет фона. Если дизайнер на самом деле хочет фотографию в качестве фона, единственное реальное решение на данный момент - это JavaScript, подобный плагину jQuery Transify, упомянутому в другом месте .
Нам нужно присоединиться к обсуждению в рабочей группе CSS и дать им атрибут background-opacity! Он должен работать рука об руку с функцией нескольких фонов.
Этот метод позволяет вам иметь изображение на заднем плане, а не только сплошной цвет, и его можно использовать для обеспечения прозрачности других атрибутов, таких как границы. Нет прозрачных изображений 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(используйте нулевые значения или что-то более подходящее для ваших нужд).
цвет фона: 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 г.)
CSS 3 имеет простое решение вашей проблемы. Использование:
background-color:rgba(0, 255, 0, 0.5);Здесь rgbaобозначает красный, зеленый, синий и альфа-значение. Значение зеленого получается из-за 255, а полупрозрачность получается из альфа-значения 0,5.
Вы можете решить это для 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')";Если вы парень из 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**
}Вы можете использовать чистый CSS 3 :, rgba(red, green, blue, alpha)где alphaвы хотите уровень прозрачности. Нет необходимости в JavaScript или jQuery.
Вот пример:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}Для минимизации разметки есть хитрость: используйте псевдоэлемент в качестве фона, и вы можете установить его непрозрачность, не затрагивая основной элемент и его дочерние элементы:
Вывод:
Соответствующий код:
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 и более поздние версии.
<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>Есть более простое решение - наложить оверлей поверх изображения на тот же элемент div. Это не правильное использование этого инструмента. Но работает как обаяние, чтобы сделать это наложение с использованием CSS.
Используйте тень от вставки, как это:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);Это все :)
Если вы используете меньше , вы можете использовать fade(color, 30%).
Чтобы сделать фон элемента полупрозрачным, но иметь непрозрачный контент (текст и изображения) элемента, вам нужно написать код CSS для этого изображения, и вам нужно добавить один атрибут opacityс минимальным значением.
Например,
.image {
position: relative;
background-color: cyan;
opacity: 0.7;
}// Чем меньше значение, тем больше оно будет прозрачным, иначе значение будет меньше прозрачности.
Вы можете использовать цвет RGB с непрозрачностью, например цветовой код в RGB (63, 245, 0), добавить непрозрачность (например, 63, 245, 0, 0,5), а также заменить RGB на RGBA. Aдолжен быть использован для непрозрачности.
div {
background: rgba(63, 245, 0, 0.5);
}Я обычно использую этот класс для своей работы. Это очень хорошо.
.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 */
}Вы можете использовать RGBA (red, green, blue, alpha) в CSS . Что-то вроде этого:
Так что просто делать что-то вроде этого будет работать в вашем случае:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}Вы можете сделать это с 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>На мой взгляд, лучший способ использовать цвет фона с непрозрачностью, как показано ниже. Если мы используем это, то мы не потеряем непрозрачность для других элементов, таких как тестовый цвет, рамка и т. Д.
background-color: rgba(71, 158, 0, 0.8);Используйте цвет фона с непрозрачностью
background-color: rgba(R, G, B, Opacity);
Это сработало для меня при использовании формата, #AARRGGBBтак что один работал для меня #1C00ff00. Попробуйте, потому что я видел, что это работает для некоторых и не работает для кого-то еще. Я использую это в CSS.
Вы можете использовать значение непрозрачности, добавленное к шестнадцатеричному значению:
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;
pнепрозрачность была,.6аspanнепрозрачность была,.5тогда истинная непрозрачность текста в промежутке была бы0.3.opacity:.5для родителя иopacity:2для дочернего элемента?opacity:2;является недействительным CSS . Значениеopacityсвойства должно быть в пределах включенного диапазона [0,1].