I have an element with text in it. Whenever I decrease the opacity, then I decrease the opacity of the WHOLE body. Is there any way I can just make the background-image darker, and not everything else?
background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
Just add this code to your image css
body{
background:
/* top, transparent black, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
/* bottom, image */
url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
}Reference: linear-gradient() - CSS | MDN
UPDATE: Not all browsers support RGBa, so you should have a 'fallback color'. This color will be most likely be solid (fully opaque) ex:background:rgb(96, 96, 96). Refer to this blog for RGBa browser support.
UPDATE 2023: All modern browsers now supports RGBa : caniuse link
Setting background-blend-mode to darken would be the most direct and shortest way to achieve the purpose however you must set a background-color first for the blend mode to work.
This is also the best way if you need to manipulate the values in javascript later on.
background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;
when you want to brightness or darker of background-color, you can use this css code
.brighter-span {
filter: brightness(150%);
}
.darker-span {
filter: brightness(50%);
}
Use an :after 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;
}
Check out my pen >
It might be possible to do this with box-shadow
however, I can't get it to actually apply to an image. Only on solid color backgrounds
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>You can use backdrop-filter: brightness(50%);
Warning:
"Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent".
Unfortunately for firefox, this requires at this time: User must explicitly enable the feature
You can use a container for your background, placed as absolute and negative z-index : 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;
}
Just to add to what's already here, use the following:
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 )");
...for cross-browser support of a 70% linear-gradient overlay. To brighten the image, you can change all those 0,0,0's into 255,255,255's. If 70% is a bit much, go ahead and change the .7. And, for future reference check out this: http://www.colorzilla.com/gradient-editor/
For me the filter/gradient approach didn't work (perhaps due to the existing CSS) so I have used :before pseudo styling trick instead:
.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;
}
Based on Alex Price's answer I made an scss mixin:
@function decToHex($dec) {
$dec: round($dec);
$hex: "0123456789ABCDEF";
$first: (($dec - $dec % 16)/16)+1;
$second: ($dec % 16)+1;
@return str-slice($hex, $first, $first) + str-slice($hex, $second, $second);
}
@mixin darken-bg ($darkAmount) {
$filterHex: decToHex(255 * $darkAmount);
background: -moz-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
background: -webkit-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
background: linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='##{$filterHex}000000', endColorstr='##{$filterHex}000000',GradientType=0 )");
}
/* usage */
.some-div {
@include darken-bg(0.2);
}
decToHex based on Pierpaolo Cira answer
