Many sites now use this kind of dimming, but I haven’t found how to do it. For example, the header has a picture in the background, and text on top of it. But to make the text readable, a translucent black background, for example, is superimposed over the picture. How to do it? The header has the following properties:
header {
height: 538px;
width: 100%;
background: url (../ img / header-bg.png) no-repeat center center;
background-size: cover;
}
Answer 1, authority 100%
for example:
header {
position: relative;
background: url (https://amazingcarousel.com/wp-content/uploads/amazingcarousel/3/images/lightbox/golden-wheat-field-lightbox.jpg) center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
header: after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba (0,0,0, .5);
z-index: 2;
}
.inner {
position: relative;
z-index: 3;
color: #fff;
text-align: center;
padding: 50px;
} & lt; header & gt;
& lt; div class = "inner" & gt;
& lt; h1 & gt; Lorem ipsum dolor. & lt; / h1 & gt;
& lt; span & gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi. & Lt; / span & gt;
& lt; / div & gt;
& lt; / header & gt; Answer 2, authority 71%
This is the answer to your question:
background: linear-gradient (rgba (255, 255, 255, 0.8), rgba (0, 0, 0, 0.5 )), url ('/ img / back / home-back.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: top;
Answer 3, authority 29%
Overlay a semi-transparent block with an rgba background (where the 4th parameter is transparency) and with absolute positioning.
HTML:
& lt; div class = "header" & gt;
& lt; div class = "cover" & gt; & lt; / div & gt;
& lt; div class = "content" & gt; & lt; / div & gt;
& lt; / div & gt;
CSS:
. header {
position: relative;
}
.cover {
background: rgba (0, 0, 0, 0.8);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.content {
position: relative;
z-index: 2;
}
Answer 4
Add a black background fill and opacity: a value from 0 to 1; for this background. Example: translucency opacity: 0.5;
Answer 5
Can be done with a pseudo-element. The code will be something like this:
header {
height: 538px;
width: 100%;
background: url (../ img / header-bg.png) no-repeat center center;
background-size: cover;
position: relative;
}
header: after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
opacity: 0.5;
z-index: 1;
}
.content {
position: relative;
color: white;
z-index: 2;
} & lt; header & gt;
& lt; div class = "content" & gt;
here is the content
& lt; / div & gt;
& lt; / header & gt; Answer 6
RGBA ();
e.g. background-color: rgba (0, 0, 0, 0.5);
Answer 7
Such a solution was also needed, as a result, suggestions through :: after , position and z-index did not work. In these cases, you need to raise all the elements on the page one position higher. Using filter and opacity is also not an option, everything is darkened.
The solution is simple.
background: url ('../ img / header / bg.jpg') no-repeat center / cover, # 555555 ;
background-blend-mode: hard-light; // or multiply
You can at least make it green. And you don’t need to change anything anywhere.