在图像的部分区域添加不透明度（CSS）

Question

如何在css中使一个600px宽度的图片只有左侧的100px透明？是否有相应的css属性可供使用？

我已经尝试添加重叠的

并向该

添加不透明度，但这很麻烦，而且看起来不是很好的解决方案。

- anyavacy

---

我会使用裁剪蒙版和绝对定位的伪元素来完成它。 - Bram Vanroy

Answer 1

我发现使用 position:absolute 重叠的 div 是唯一的解决方案，因为在 CSS 中没有属性可以捕捉半张图片。

HTML

<div class="parent">
    <div id="opacity_div"></div>
    <img class="half_fade" src="http://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

- Gaurav Aggarwal

---

这个答案是错误的。很抱歉。有一种CSS解决方案，即“clip”和“clip-path”属性。可以在此处找到“clip”属性：http://www.w3schools.com/cssref/pr_pos_clip.asp，并且具有出色的浏览器支持。可以在此处找到“clip-path”属性：http://caniuse.com/#feat=css-clip-path，但仍然具有非常有限的浏览器支持。 - Mr. Hugo

@JoostS，剪辑属性已经被弃用了，兄弟。https://developer.mozilla.org/en/docs/Web/CSS/clip 对于IE浏览器支持，你会怎么做？ - Gaurav Aggarwal

“clip”属性在CSS2.1规范中，MDN指出：“clip-path属性替代了现已弃用的clip属性”。因此，请将您的答案更改为正确的答案！如果您对使用它们有意见，请明确说明。写一些像这样的东西：“有两个属性，但我不会使用它们，因为…” - Mr. Hugo

Answer 2

解决方案是使用另一个图像元素覆盖在图像元素上，使用绝对定位和裁剪（http://codepen.io/anon/pen/jqpwgV）。

HTML:

<img src="img.jpg" id="image-overlay" />
<img src="img.jpg" id="image" />

CSS：

#image-overlay{position:absolute;clip: rect(0px,498px,374px,100px);}
#image{opacity:0.5;}

如果您想做好未来准备，请在CSS中使用优雅降级的clip-path功能。请参见以下代码(或http://codepen.io/anon/pen/zqLdxW)。

#image-overlay{position:absolute; 
  clip: rect(0px,498px,374px,100px);
  -webkit-clip-path: inset(0px 0px 0px 100px);
  clip-path: inset(0px 0px 0px 100px);
  }
#image{opacity:0.5;}

- bubfather

---

clip已被弃用，而clip-path在浏览器支持方面存在问题。 - Vucko