html цвет - Как передать текст или изображение прозрачным фоном с помощью CSS?
на поверх (23)
Возможно ли, используя только 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 родителя.
Answers
фоновый цвет: RGBA (255,0,0,0.5); как упомянуто выше, лучший ответ просто поставлен. Говорить, что использование CSS3, даже в 2013 году, не просто потому, что уровень поддержки различных браузеров меняется с каждой итерацией.
Хотя background-color поддерживается всеми основными браузерами (не новостями для CSS3) [1], альфа-прозрачность может быть сложной, особенно с Internet Explorer до версии 9 и с цветом границы на Safari до версии 5.1. [2]
Использование чего-то вроде Compass или SASS действительно может помочь в производстве и совместимости с кросс-платформой.
[1] W3Schools: Свойство background-color CSS
[2] Блог Нормана: Контрольный список поддержки браузера CSS3 (октябрь 2012 г.)
Некоторое время назад я писал об этом в прозрачной прозрачности браузера с помощью CSS .
Необычайно Internet Explorer 6 позволит вам сделать фон прозрачным и сохранить текст полностью непрозрачным. Для других браузеров я предлагаю использовать прозрачный PNG-файл.
Обычно я использую этот класс для своей работы. Это очень хорошо.
.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 */
} Вы можете использовать RGBA (red, green, blue, alpha) в CSS , что-то вроде этого:
Поэтому просто сделайте что-нибудь подобное в своем случае:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Если вы парень 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**
}
Вот как я это делаю (это может быть не оптимально, но оно работает):
Создайте div который вы хотите быть полупрозрачным. Дайте ему класс / id. Оставьте его ПУСТОЙ и закройте его. Дайте ему заданную высоту и ширину (скажем, 300 пикселей на 300 пикселей). Дайте ему непрозрачность 0,5 или все, что вам нравится, и цвет фона.
Затем DIRECTLY BELOW, что div, создайте еще один div с другим классом / id. Создайте абзац внутри него, где вы разместите свой текст. Дайте позицию div : relative и top: -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.
Есть более легкое решение поместить наложение поверх изображения в один и тот же div. Это неправильное использование этого инструмента. Но работает как шарм, чтобы сделать этот оверлей с помощью CSS.
Используйте вставную тень следующим образом:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
Это все :)
В 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 для этого изображения, и вам нужно добавить один атрибут с непрозрачностью с минимальным значением. например
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// меньшее значение будет больше прозрачности, иначе значение будет прозрачным.
Лучше использовать полупрозрачный .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 и дайте им значение непрозрачности, чтобы оставить элемент в его исходной непрозрачности. Таким образом, вы можете использовать: прежде, чем сделать faux-элемент и предоставить ему прозрачный фон (или границы), который вы хотите, и переместить его за контент, который вы хотите сохранить непрозрачным с z-index .
Пример ( fiddle ) (обратите внимание на то, что DIV с DIV класса просто обеспечивает некоторый контекст и контрастирует с цветами, этот дополнительный элемент на самом деле не нужен, а красный прямоугольник перемещается немного вниз и вправо, чтобы оставить видимым фон за элементом 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 либо используйте CSS3:
background-color:rgba(255,0,0,0.5);
Вот статья css3.info, Opacity, RGBA и компромисс (2007-06-03).
У CSS3 есть легкое решение вашей проблемы. Использование:
background-color:rgba(0,255,0,0.5);
Здесь rgba означает красный, зеленый, синий и альфа-значение. Зеленое значение получается из-за 255, а половина прозрачности получается с помощью 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>
Вы можете решить эту проблему для 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')";
Почти все эти ответы предполагают, что дизайнер хочет сплошной цвет фона. Если дизайнер действительно хочет, чтобы в качестве фона единственным реальным решением на данный момент был JavaScript, как плагин jQuery Transify, упомянутый в другом месте .
Что нам нужно сделать, так это присоединиться к обсуждению рабочей группы CSS и заставить их дать нам атрибут фона-непрозрачности! Он должен работать рука об руку с функцией нескольких фонов.
Вы можете использовать чистый CSS 3 : rgba(red, green, blue, alpha) , где alpha - это уровень прозрачности, который вы хотите. Нет необходимости в JavaScript или jQuery.
Вот пример:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
Для простого полупрозрачного цвета фона вышеперечисленные решения (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>
Этот метод работает с использованием двух «слоев» внутри элемента внешней панели:
- один («назад»), который соответствует размеру элемента панели, не затрагивая поток содержимого,
- и один («cont»), который содержит контент и помогает определить размер панели.
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>s вместо<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>И вот живая демонстрация используемой техники широко:
Вы можете использовать цвет RGB с непрозрачностью, подобный этому цветовому коду в RGB (63,245,0), и добавить непрозрачность (63,245,0,0,5), а также добавить RGBA вместо RGB. Использование для непрозрачности
div{
background:rgba(63,245,0,0.5);
} Проблема в том, что в тексте на самом деле есть полная непрозрачность в вашем примере. Он имеет полную непрозрачность внутри тега p , но тэг p просто полупрозрачен.
Вы можете добавить полупрозрачное фоновое изображение PNG вместо того, чтобы реализовать его в CSS, или разделить текст и div на 2 элемента и переместить текст над полем (например, отрицательный запас).
Иначе это будет невозможно.
РЕДАКТИРОВАТЬ:
Точно так же, как сказал Крис: если вы используете PNG-файл с прозрачностью, вы должны использовать обходное решение JavaScript, чтобы заставить его работать в отвратительном Internet Explorer ...
Если вы используете Less , вы можете использовать fade(color, 30%) .
Вы, вероятно, захотите этого:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
Как и другие, попробуйте vertical-align по изображению:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS не раздражает. Вы просто не читаете документацию . ;П
