css overlay color code example
Example 1: How to overlay image with color in CSS?
background: linear-gradient(#3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
Example 2: make background overlay css
#element-with-background-image {
position: relative;
background-image: url("//spin.atomicobject.com/wp-content/uploads/20170324102432/portfolio-tips-feature-image.jpg");
}
#color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
}
Example 3: make background overlay css
<div id="element-with-background-image">
<div id="color-overlay"></div>
...
</div>
Example 4: div color overlay css
box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 67%);