Is it possible to set the opacity of a background image without affecting the opacity of child elements?
All links in the footer need a custom bull
Take your image into an image editor, turn down the opacity, save it as a .png and use that instead.
we can figure out that by not playing with opacity just by using rgba color
e.g "background-color: rgba(0,0,0, 0.5)"
Sample :
Previous Css:
.login-card {
// .... others CSS
background-color: #121e1b;
opacity: 0.5;
}
To :
.login-card {
// .... others CSS
background-color: rgba(0, 0, 0, 0.5);
}
Just to add to the above..you can use the alpha channel with the new color attributes eg. rgba(0,0,0,0) ok so this is black but with zero opacity so as a parent it will not affect the child. This only works on Chrome, FF, Safari and....I thin O.
convert your hex colours to RGBA
This will work with every browser
div {
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent.
Check demo at http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
You can put the image in the div:after or div:before and set the opacity on that "virtual div"
div:after {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
opacity: 0.25;
}
found here http://css-tricks.com/snippets/css/transparent-background-images/
You can use CSS linear-gradient()
with rgba()
.
div {
width: 300px;
height: 200px;
background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
background: black;
color: white;
}
<div><span>Hello world.</span></div>