如何让div上的opacity对img起作用？

Question

html结构：

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div id="container">
        <img src="img1.png" alt="">
        <img src="img2.png" alt="">
        <img src="img3.png" alt="">
        <img src="img4.png" alt="">
    </div>
</div>

css

*{margin:0px;padding:0px;}
#wraper{width:100%;height:200px;position:relative;display:flex;overflow:hidden auto;:w
}
#left{width:50%;height: 200px;position:absolute;opacity:0.1;}
#right{width:50%;height: 200px;position:absolute;left:960px;}
#container{width:3840px;height: 200px;position:absolute;display:flex;}
img{width: 960px;height: 200px;}

container的宽度是它的父元素wrapper，2倍的宽度。
container1/4空间和left重叠，img1的位置在#left里面了。
请问，为何#left上的透明度opacity设置，对img1.png不起作用？
可否让#left上的透明度opacity设置对img1.png起作用？

container会移动，因此图片的位置是动的，我希望,#left所占空间对应的图片，它的opcity是0.5.
我不能写具体的img的opacity特性（img的位置会动，也可以用js来判断，动态设定，但是感觉麻烦），如果有办法通过对#left的控制显示来达到目的就号了。

Answer 1

我不太理解你的意思
首先left没有设置层级，所以虽然它是绝对定位但是它在container下面，所以这里不显示正常，除非你设置z-index
但是假设你设置了层级，你的left没有背景色，所以默认就是无色透明的，所以你的透明度在这里还是没意义
你要的难道是这种效果？示例