Javascript 如何在html中删除或隐藏图像的不透明度？

我有一个图像显示为背景图像。我想将默认不透明度设置为0.5。并希望某些部分在图像中显示时不出现不透明度。纯css、html、javascript/jQuery是否有可能

下面是示例图像。

---

您可以通过使用位置：绝对将

放置在图像上来完成此操作。我在下面添加了一个片段

img{
宽度：300px；
高度：300px；
}
#突出显示{
位置：绝对位置；
宽度：100px；
高度：100px；
背景：#fff；
不透明度：0.5；
顶部：50px；
左：50px；
}

这里是诀窍

使用

：before

或

：after

伪元素创建覆盖

应用css3转换

使用大的

框阴影

并在父对象上添加

溢出：隐藏

，以隐藏不需要的部分

。图像保持器{
显示：内联块；
位置：相对位置；
垂直对齐：顶部；
溢出：隐藏；
}
.图像持有者：之前{
盒影：0.1000px rgba（0,0,0,0.5）；
变换：倾斜（-25度）；
-webkit变换：倾斜（-25度）；
-webkit背面可见性：隐藏；
位置：绝对位置；
宽度：100px；
底部：20px；
内容：''；
右：100px；
顶部：20px；
}
.图像支架{
垂直对齐：顶部；
}

---

添加了@azhar I的可能重复答案如果有帮助，请不要忘记勾选它