Question

如何在css中只添加100px宽图像的左600px？是否有css属性？

我尝试添加重叠div并为此div添加不透明度，但这背后是一种痛苦，看起来不是一个好的解决方案。

Answer 1

解决方案是使用覆盖图像元素与另一个图像元素，使用绝对位置和剪切（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中使用带有优雅降级的剪辑路径。请参阅下面的代码（或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;}

Answer 2

我发现用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

将不透明度添加到图像的一部分（CSS）

2 个答案: