将不透明度添加到图像的一部分(CSS)

Question

如何才能增加opacitiy只是左100px一的600px在CSS宽的形象？那css有财产吗？

我试图添加一个重叠div并添加不透明度div,但这是一个痛苦的后面,并不是一个好的解决方案.

Answer 1

好吧，我发现重叠 divposition:absolute是唯一的解决方案，因为它们在 css 中没有属性来捕获半图像。

超文本标记语言

<div class="parent">
    <div id="opacity_div"></div>
    <img class="half_fade" src="https://i.stack.imgur.com/W7mPR.jpg?s=32&g=1">
</div>

CSS

.parent{
   position:relative;
}
#opacity_div{
   background:#fff;
   height:20px;
   width:20px;
   position:absolute;
   top:18px;
   left:6px;
   opacity:0.5 /* manipulate to desired opacity */
}
img.half_fade {
   position:absolute;
   top:0;left:0;
   z-index:-1000;
}

示例： http: //jsfiddle.net/JMBFS/81/

查看这个问题以更好地理解：https://drupal.stackexchange.com/questions/70025/how-to-apply-opacity-to-just-a-portion-of-the-image/70029