Html css背景图像部分宽度不透明度

如何创建部分宽度不透明度

我有一个div，它有一个透明的背景图像，我使用after来获得这样的效果

.indicators菜单{
宽度：100%；
身高：100%；
显示：块；
位置：绝对位置；
排名：0；
z指数：1；
}
.指示灯菜单：：之后{
背景图片：url（'bg_platform_repeat.jpg'）；
内容：“；
不透明度：0.9；
排名：0；
位置：绝对位置；
z指数：-1；
左：0；
宽度：100%；
身高：100%；
背景重复：无重复；
背景尺寸：封面；
背景位置：未设置；
}

一个想法是在图像上方使用覆盖层来模拟这种效果。使用的颜色必须与以下背景相同：

.box{
背景：
线性梯度（rgba（255255,0.3），rgba（255255,0.3））左/80%100%，
url（'https://picsum.photos/200/200?image=1069'）中心/盖；
背景重复：无重复；
宽度：200px；
高度：200px；
}

---

使用

:before

和

背景：白色

和

不透明度：0.1

（我设置

0.4

只有你才能看到差异）和

宽度：80%

.indicators menu:：after、.indicators menu:：before{
背景图像：url（'https://i.imgur.com/BK7wL0d.jpg');
内容：“；
不透明度：1；
排名：0；
位置：绝对位置；
z指数：-1；
左：0；
宽度：100%；
身高：100%；
背景重复：无重复；
背景尺寸：封面；
背景位置：未设置；
}
.指示灯菜单：：之前{
背景：白色；
不透明度：0.4；
z指数：2；
宽度：80%；
}

我需要做的是按宽度分割不透明度，而不是不透明度为0.9时的100%到80%和不透明度为1时的20%

使用具有相同背景图像但位置不同的两个伪元素

div{
宽度：460px；
高度：300px；
保证金：1em自动；
边框：1px纯红；
位置：相对位置；
}
部门：之前，
部门：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
底部：0；
背景图片：url(http://www.fillmurray.com/460/300);
背景重复：无重复；
背景尺寸：封面；
}
部门：以前{
宽度：80%；
不透明度：0.5；
/*比如说*/
}
部门：之后{
宽度：20%；
左：80%；
背景位置：100%0；
}

如果你在那里发布相关的HTMLHey，我会更好，你的解释和代码都会有所帮助。发布一张你尝试过的鼓舞人心的图片或完整的代码。使用两个伪元素（添加

：：before

），使一个80%和一个20%宽，并相应地定位它们…？我在这里尝试了所有答案，但我没有为自己工作。也许是因为我的主要部门是绝对的。我添加了主div css。