Как сделать текст или изображение прозрачным фоном с помощью CSS?
https://stackoverflow.com/questions/806000
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Возможно ли, используя только 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 изображение или используйте CSS3:
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>Другие советы
В 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 или фоновые изображения).Однако, если вы хотите сделать что-то более необычное (например,анимация, несколько фонов и т. д.), или, если вы не хотите полагаться на 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 не будут содержаться.Вам нужно будет убедиться, что они очищены или иным образом локализованы, иначе они выскользнут снизу.
- Поля располагаются на элементе панели, а отступы — на элементе 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>И вот живая демонстрация техника широко используется:
Лучше использовать полупрозрачный. .png.
Просто открой фотошоп, создать 2x2 пиксельное изображение (сбор 1x1 может вызвать ошибку в Internet Explorer!), залейте его зеленым цветом и установите непрозрачность на вкладке «Слои» на 60%.Затем сохраните его и сделайте фоновым изображением:
<p style="background: url(green.png);">any text</p>
Работает конечно круто, кроме как в милом Интернет Проводник 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');
}
Есть хитрость, позволяющая минимизировать разметку:Использовать псевдоэлемент в качестве фона, и вы можете установить для него непрозрачность, не затрагивая основной элемент и его дочерние элементы:
Выход:
Соответствующий код:
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>Поддержка браузера есть Интернет Проводник 8 и позже.
Самый простой способ — использовать полупрозрачный фон. PNG изображение.
Вы можете использовать JavaScript, чтобы заставить его работать в Internet Explorer 6 Если вам нужно.
Я использую метод, описанный в Прозрачные PNG в Internet Explorer 6.
Кроме этого,
вы могли бы подделать это, используя two side-by-side sibling elements - делать один полупрозрачный, затем absolutely position the other over the top?
Этот метод позволяет вам использовать изображение на заднем плане, а не только сплошной цвет, и его можно использовать для обеспечения прозрачности других атрибутов, таких как границы.Никаких прозрачных изображений 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 (используйте нулевые значения или любые другие, более подходящие для ваших нужд).
Проблема в том, что в вашем примере текст на самом деле ИМЕЕТ полную непрозрачность.Он имеет полную непрозрачность внутри p тег, но p тег просто полупрозрачен.
Вы можете добавить полупрозрачное фоновое изображение PNG вместо реализации его в CSS или разделить текст и разделить его на 2 элемента и переместить текст над полем (например, с отрицательным полем).
Иначе это будет невозможно.
РЕДАКТИРОВАТЬ:
Как сказал Крис:если вы используете PNG-файл с прозрачностью, вам придется использовать обходной путь JavaScript, чтобы он работал в надоедливом Internet Explorer...
Почти все эти ответы предполагают, что дизайнеру нужен однотонный фон.Если дизайнеру действительно нужна фотография в качестве фона, единственным реальным решением на данный момент является JavaScript, такой как плагин jQuery Transify. упомянуто в другом месте.
Что нам нужно сделать, так это присоединиться к обсуждению рабочей группы CSS и заставить их предоставить нам атрибут непрозрачности фона!Он должен работать рука об руку с функцией нескольких фонов.
Вот как я это делаю (возможно, это не оптимально, но работает):
Создайте div что вы хотите быть полупрозрачным.Дайте ему класс/идентификатор.Оставьте его ПУСТЫМ и закройте.Задайте ему заданную высоту и ширину (скажем, 300 на 300 пикселей).Задайте ему непрозрачность 0,5 или любой другой цвет и цвет фона.
Затем, НЕПОСРЕДСТВЕННО НИЖЕ этого div, создайте еще один div с другим классом/идентификатором.Создайте внутри него абзац, куда поместите текст.Дай div позиция:относительный и верхний: -295px (это ОТРИЦАТЕЛЬНЫЕ 295 пикселей).Для наглядности присвойте ему z-индекс 2 и убедитесь, что его непрозрачность равна 1.Оформите свой абзац так, как вам нравится, но убедитесь, что размеры меньше, чем у первого. div чтобы он не переполнялся.
Вот и все.Вот код:
.trans {
opacity: 0.5;
height: 300px;
width: 300px;
background-color: orange;
}
.trans2 {
opacity: 1;
position: relative;
top: -295px;
}
.trans2 p {
width: 295px;
color: black;
font-weight: bold;
}<body>
<div class="trans">
</div>
<div class="trans2">
<p>
text text text
</p>
</div>
</body>Это работает в Safari 2.x, насчет Internet Explorer я не знаю.
Вот плагин jQuery, который сделает все за вас, Transify (Transify — плагин jQuery для легкого применения прозрачности/непрозрачности к фону элемента.).
Время от времени я сталкивался с этой проблемой, поэтому решил написать что-нибудь, что значительно облегчит жизнь.Размер сценария составляет менее 2 КБ, и для его работы требуется всего 1 строка кода, а также, если хотите, он будет обрабатывать анимацию непрозрачности фона.
Непрозрачность фона, но не текста есть некоторые идеи.Либо используйте полупрозрачное изображение, либо наложите дополнительный элемент.
Некоторое время назад я писал об этом в Кросс-браузерная прозрачность фона с помощью CSS.
Как ни странно, Internet Explorer 6 позволяет вам сделать фон прозрачным, а текст сверху оставить полностью непрозрачным.Для других браузеров я предлагаю использовать прозрачный файл PNG.
Если вы фотошоп парень, ты также можешь использовать:
#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-код для этого изображения и добавить один атрибут, называемый непрозрачностью, с минимальным значением.например
.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]
Используя что-то вроде Компас или САСС может действительно помочь в производстве и кросс-платформенной совместимости.
[1] W3Школы:Свойство CSS-цвета фона
[2] Блог Нормана:Контрольный список поддержки браузера CSS3 (октябрь 2012 г.)
CSS3 предлагает простое решение вашей проблемы.Использовать:
background-color:rgba(0,255,0,0.5);
Здесь rgba означает красный, зеленый, синий и значение альфа.Зелёное значение получается из-за 255, а половинная прозрачность получается из-за значения альфа 0,5.
Если вы используете Меньше, вы можете использовать fade(color, 30%).
Вы можете решить это для Интернет Проводник 8 с помощью (ab) использования синтаксиса градиента.Цветовой формат — ARGB.Если вы используете Сасс препроцессоре вы можете конвертировать цвета с помощью встроенной функции "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)
}
<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);
Вот и все :)
Вы можете использовать РГБА (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>Обычно я использую этот класс для своей работы.Это очень хорошо.
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}С моей точки зрения, лучший способ использовать цвет фона с непрозрачностью. Если мы воспользуемся этим, мы не потеряем непрозрачность для других элементов, таких как тестовый цвет, граница и т. д.
background-color: rgba(71,158,0,0.8);
Используйте цвет фона с непрозрачностью
цвет фона:rgba(R,G,B,Непрозрачность);
Вы можете использовать цвет RGB с непрозрачностью, например, с этим цветовым кодом в RGB (63,245,0), и добавить непрозрачность, например (63,245,0,0,5), а также добавить RGBA вместо RGB.Использование непрозрачности
div{
background:rgba(63,245,0,0.5);
}