css background-image partial width opacity

Question

How to create a partial width opacity ?

I have a div that has a background image with transparency, I used after to do get the effect like this

 .indicators-menu { width: 100%; height: 100%; display: block; position: absolute; top: 0; z-index: 1; } .indicators-menu::after { background-image: url('bg_platform_repeat.jpg'); content: ""; opacity: 0.9; top: 0; position: absolute; z-index: -1; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: unset; } 

This works great, but what I need to do is to split the opacity by width instead of 100% to 80% with opacity 0.9 and 20% with opacity 1

I thought to use the CSS mask property but I see that its not well supported

Answer 1

what i need to do is to split the opacity by width instead of 100% to 80% with opacity 0.9 and 20% with opacity 1

Use two pseudo-elements with the same background image but position them differently.

 div { width: 460px; height: 300px; margin: 1em auto; border: 1px solid red; position: relative; } div:before, div:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; background-image: url(http://www.fillmurray.com/460/300); background-repeat: no-repeat; background-size: cover; } div:before { width: 80%; opacity: 0.5; /* for example */ } div:after { width: 20%; left: 80%; background-position: 100% 0; } 

 <div> </div> 

Answer 2

One idea is to use an overlay above the image to simulate this effect. The color used need to be the same as the below background:

 .box { background: linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)) left/80% 100%, url('https://picsum.photos/200/200?image=1069') center/cover; background-repeat: no-repeat; width: 200px; height: 200px; } 

 <div class="box"> </div> 

Answer 3

Use :before with background: white; and opacity:0.1 (I set 0.4 only you to see the difference) and width:80%

 .indicators-menu::after,.indicators-menu::before{ background-image: url('https://i.imgur.com/BK7wL0d.jpg'); content: ""; opacity:1; top: 0; position: absolute; z-index: -1; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: unset; } .indicators-menu::before{ background: white; opacity: 0.4; z-index: 2; width: 80%; } 

 <div class="indicators-menu"> </div>