Есть ли способ добавить прозрачность к фоновому изображению с помощью CSS3?
Фоновая прозрачность изображения с CSS3?
Ответ 1
Если вы используете тег изображения для установки изображения, его можно легко изменить, используя свойство CSS3 "непрозрачность".
Это написано так:
img {
opacity: 0.4;
filter: alpha(opacity = 40); /* For IE */
}
значение непрозрачности должно быть между 0 и 1. 0 невидимым и 1 непрозрачным.
Если вы применяете фоновое изображение, используя свойство "background-image" CSS, вы все равно можете использовать непрозрачность для изменения фонового изображения, но это должно быть сделано по-другому.
Это связано с тем, что значение непрозрачности изменяет непрозрачность для всего элемента, когда вы хотите, чтобы непрозрачность была изменена на фоновом изображении.
Существует простой способ обойти это: просто наложите содержимое на изображение и оберните его в общий родительский элемент и примените изменение непрозрачности только к базовой части:
HTML
<div id="container">
<div id="background" class="translucent"></div>
<div id="content"></div>
</div>
CSS
.translucent {
opacity: 0.4;
filter: alpha(opacity = 40); /* For IE */
}
#container {
position: relative;
width: 200px;
height: 200px;
}
#background, #content {
position: absolute;
top: 0;
left: 0;
}
#background {
background-image: url(http://www.thisisfake.com);
}
Ответ 2
Вы также можете выполнить трансарентное фоновое изображение с использованием псевдо-классов css3 и непрозрачности. Например....
HTML:
<div class="transparent-background">
...content that should have 100% opacity...
</div>
CSS
.transparent-background { ... }
.transparent-background:after {
background: url("../images/yourimage.jpg") repeat scroll 0 0 transparent;
opacity: 0.5;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
См. образец - http://jsfiddle.net/sjLww/
Ответ 3
Добавьте изображение в тег HTML и добавьте background-color с помощью rgba(0,0,0,[your opacity])
html {
background:url('image.jpg') #303030;
background-size:cover;
}
body {
background:rgba(0,0,0,0.7);
}
Ответ 4
Вы можете сохранить это изображение с непрозрачностью из Photoshop или использовать сплошной или градиентный цвет в качестве фона с цветом RGBA: background-color: rgba (0,0,0,.4)
Ответ 5
да, IE9, Firefox, Chrome, Opera и Safari используют свойство непрозрачность для прозрачности. Свойство opacity может принимать значение от 0.0 - 1.0. Более низкое значение делает элемент более прозрачным.
IE8 и более ранние используют фильтр : alpha (opacity = x). Значение x может принимать значение от 0 - 100. Более низкое значение делает элемент более прозрачным.
img
{
opacity: 0.5; /*(Range = 0.0 to 1.0)*/
filter: alpha(opacity = 50); /* (Range = 0% to 100%) For IE8 & ealier */
}
Также мы можем предоставить OPACITY для любого тега <DIV> и сделать прозрачные поля.
Вот *
ПОЛНЫЙ ПРИМЕР
<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis4_small.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
Ответ 6
непрозрачность изображения не является свойством CSS3, это свойство CSS2. С этим свойством не существует проблем с совместимостью между браузерами. Он отлично работает даже в более старых версиях IE.
Ниже приведен синтаксис
img {
opacity: 0.7;
filter: alpha(opacity = 70); /* For IE */
}
значение непрозрачности должно быть между 0 и 1. 0 невидимым и 1 непрозрачным.
для прозрачности для элементов DOM background-color свойство rgba может использоваться как
div {
background: rgba(200, 54, 54, 0.5);
}
так как есть проблемы совместимости со старыми версиями IE, рекомендуется резервное копирование.
div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}
Пользовательские листы IE также могут использоваться для повышения производительности.
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
</style>
Ответ 7
Прозрачность фонового изображения не входит в спецификацию CSS (хотя это должно быть, пожалуйста, кто-то положил ее, я думаю, что Chrome действительно может это подтвердить).
Однако частичный способ подражания прозрачности с фоновым изображением заключается в включении линейного градиента в CSS. Он будет помещен поверх фонового изображения, и если вы используете фоновый цвет тела, вы можете создать эффект замирания изображения на фоне веб-страницы, но вам нужно использовать RGB A цветной режим и переход от одного и того же цвета к одному и тому же цвету с различными настройками альфа, например:
background:linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,1)), url(images/myImage.jpg) fixed no-repeat top center;
Ответ 8
Существует идеальный инструмент с именем: Petteriny (прозрачный производитель пикселей) которые создают любой шаблон прозрачности, в котором вы нуждаетесь. Он также генерирует необходимый CSS. вот пример того, что делает этот инструмент.
.myDiv{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}
Вы используете его, как это в вашем html
<style>
.transback {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}
</style>
<div class="pure-u-1 transback">
your text over image
</div>
В этом инструменте также можно загрузить шаблон