For example I have this CSS to give a background image to my web site:
body{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-image: url(/images/grid.png);
background-repeat: repeat;
}
It is a simple repeating image but I want to make it opaque with an alpha value of .5.
Can I do this in the CSS?
If I apply opacity
opacity: .5;
directly to the body tag, it actually makes everything except the background opaque.
CodePudding user response：
No, but you can apply a color with transparency on top to simulate opacity.
background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), url('image.png');
CodePudding user response：
Not exactly match with opacity but I think this is also solve your problem.
background-blend-mode
body{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-image: url(/images/grid.png);
background-repeat: repeat;
bakcground-color: red; /* this will effect your background-image.*/
/* you can set an rgba value to set opacity */
background-blend-mode: multiply;
}