how to change the opacity of background image? [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I made a slider with pure css and I want to set the background opacity of each background-image (so, that I can give it a nice fade animation). I know that I could use css generated content to add image using opacity: 1; property but I have a lot of css code so is there any easy way to get around this??
without any generated content or psuedo-elements??
/************ SLIDER ************/
/*this contains the slides which are inside a wrap*/
#slide-Panel{
width: 100%;
height: 40%;
overflow: hidden;
}
/*this contins the slides*/
.wrap{
position: relative;
width: 100%;
height: 100%;
background: #000;
text-align: center;
overflow: hidden;
}
.slide{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
background: #000;
background-repeat: no-repeat;
background-position:50% 50%;
background-size: cover;
padding: 2em 2em;
color: white;
font-size: 1em;
}
.slide a {
background: #0FCABF;
padding: .6rem 1.6rem;
color: white;
font-weight: 700;
margin: 1rem;
}
.wrap input[type="radio"]{
position: absolute;
z-index: 200;
bottom: 10%;
left: auto;
right: auto;
}
.wrap input[type="radio"]:nth-of-type(1){
margin-left: -1.2rem;
}
#slider-2-trigger{
margin-left: .4rem;
}
.slide-two{
background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/35VYJ0NK0V.jpg');/*change the opacity of these images*/
}
.slide-one{
background-image: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?crop=entropy&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1175');/*change the opacity of these images*/
}
[id^="slider"]:checked + section {
z-index: 100;
left: 0;
}
.slide :not(img){
display: none;
}
.slide img{
opacity: .6;
width: 220px;
height: 148px;
margin: 2em auto;
}

Answer 1

There is no direct way to change the opacity of a background image.
But here's a workaround, please try this.
Here's the code you should use:
div::after {
content: "";
// Add your background image here
background: url("https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg");
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
And the JSFiddle to it.