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

Question

我有一张显示为背景图像的图像。我想将默认不透明度设置为0.5。并希望在图像中显示一些没有不透明度的部分。纯粹用css，html，javascript / jQuery吗？

以下是示例图片。

Answer 1

这是诀窍。

1. 使用:before或:after伪元素创建叠加层。
2. 应用css3转换。
3. 使用较大的box-shadow并在父级上添加overflow: hidden以隐藏不需要的部分。
＆＃13;
＆＃13;
.image-holder {
  display: inline-block;
  position: relative;
  vertical-align: top;
  overflow: hidden;
}

.image-holder:before {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
  transform: skew(-25deg);
  -webkit-transform: skew(-25deg);
  -webkit-backface-visibility: hidden;
  position: absolute;
  width: 100px;
  bottom: 20px;
  content: '';
  right: 100px;
  top: 20px;
}

.image-holder img {
  vertical-align: top;
}
＆＃13;
<div class="image-holder">
  <img src="http://placehold.it/450x200">
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你可以通过使用 position：absolute 在图像上放置<ScrollView android:layout_width="match_parent" android:fillViewport="true" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_height="wrap_content" ... > <LinearLayout android:layout_height="wrap_content" ... > <LinearLayout android:layout_height="wrap_content" ... > <!--Use dp also, because when you have more childs, it wants a dp to maitain a size--> <RelativeLayout android:layout_width="match_parent" android:layout_height="200dp" android:layout_weight="1"> <com.google.android.gms.maps.MapView android:layout_width="match_parent" android:layout_height="match_parent" /> <Button ... /> <Button ... /> <Button ... /> </RelativeLayout> </LinearLayout> </ScrollView> 来完成此操作。我在下面添加了一个片段。

<div>

img{
  width:300px;
  height:300px;
  }
#highlight{
  position:absolute;
  width:100px;
  height:100px;
  background:#fff;
  opacity:0.5;
  top:50px;
  left:50px;
  
  }