Как затемнить фон с помощью CSS?
у меня есть элемент с текстом в нем. Всякий раз, когда я уменьшаю непрозрачность, я уменьшаю непрозрачность всего тела. Есть ли способ я могу просто сделать background-image
темнее, а не все остальное?
background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
6 ответов
просто добавьте этот код в изображение css
background:
/* top, transparent black, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
/* bottom, image */
url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
}
ссылки: линейный градиент () - CSS | MDN
UPDATE: Не все браузеры поддерживают RGBa, поэтому у вас должен быть "резервный цвет". Этот цвет, скорее всего, будет сплошным (полностью непрозрачным) ex:background:rgb(96, 96, 96)
. Обратитесь к этому блог для поддержки браузера RGBa.
используйте: после psuedo-element:
.overlay {
position: relative;
transition: all 1s;
}
.overlay:after {
content: '\A';
position: absolute;
width: 100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.5);
opacity: 1;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.overlay:hover:after {
opacity: 0;
}
Проверьте мою ручку >
вы можете использовать контейнер для фона, помещенный как абсолютный и отрицательный z-индекс : http://jsfiddle.net/2YW7g/
HTML-код
<div class="main">
<div class="bg">
</div>
Hello World!!!!
</div>
в CSS
.main{
width:400px;
height:400px;
position:relative;
color:red;
background-color:transparent;
font-size:18px;
}
.main .bg{
position:absolute;
width:400px;
height:400px;
background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png");
z-index:-1;
}
.main:hover .bg{
opacity:0.5;
}
просто добавить к тому, что уже здесь, используйте следующую конструкцию:
background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )");
...для кросс-браузерной поддержки 70% линейно-градиентного наложения. Чтобы скрасить изображение, вы можете изменить все эти 0,0,0
' s в 255,255,255
' s. Если 70% - это немного много, продолжайте и измените .7
. И, на будущее проверить это: http://www.colorzilla.com/gradient-editor/
возможно, это можно сделать с помощью box-shadow
однако, я не могу получить его, чтобы применить к изображению. Только на фоне сплошного цвета
body {
background: #131418;
color: #999;
text-align: center;
}
.mycooldiv {
width: 400px;
height: 300px;
margin: 2% auto;
border-radius: 100%;
}
.red {
background: red
}
.blue {
background: blue
}
.yellow {
background: yellow
}
.green {
background: green
}
#darken {
box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
/*darkness level control - change the alpha value for the color for darken/ligheter effect */
}
Red
<div class="mycooldiv red"></div>
Darkened Red
<div class="mycooldiv red" id="darken"></div>
Blue
<div class="mycooldiv blue"></div>
Darkened Blue
<div class="mycooldiv blue" id="darken"></div>
Yellow
<div class="mycooldiv yellow"></div>
Darkened Yellow
<div class="mycooldiv yellow" id="darken"></div>
Green
<div class="mycooldiv green"></div>
Darkened Green
<div class="mycooldiv green" id="darken"></div>
для меня подход фильтра/градиента не работал (возможно, из-за существующего CSS), поэтому я использовал :before
псевдо стиль трюк вместо:
.eventBannerContainer {
position: relative;
}
.eventBannerContainer:before {
background-color: black;
height: 100%;
width: 100%;
content: "";
opacity: 0.5;
position: absolute;
display: block;
}
/* make any immediate child elements above our darkening mask */
.eventBannerContainer > * {
position: relative;
}