Question

有没有办法使用HTML在特定div中使用图片网址添加叠加层？

我设法使用CSS制作一些东西：

#myDiv {
  width: 100%;
  height: 100%;
  background: url(image.jpg) no-repeat;

}
#myDiv:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
  opacity: .6;
}

但这有点棘手。当我试图为其他div做同样的事情时，它没有用。所以例如我有一个div的CSS代码：

.hi-icon-wrap img
{
    border-radius: 80px;
    width: 153px;
    height: 153px;
    margin:2%;
}

我要添加叠加层。我正在使用这个脚本，但没有成功：

.hi-icon-wrap img:before {
  background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
  opacity: .6;
}

我也测试过：

.hi-icon-wrap img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
  opacity: .6;
}

UPD：

HTML脚本：

<div class="hi-icon-wrap" class="hi-icon-wrap img" style="text-align: center">
    <img src="image.png">
 </div>

Answer 1

您应该在div元素上使用叠加层而不是img

#myDiv {
  position: relative;
  display: inline-block;
  border-radius: 80px;
  overflow: hidden;
}
#myDiv:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
  opacity: .8;
}
img {
  vertical-align: top;
}

<div id="myDiv">
  <img src="http://placehold.it/150x150/D6E7FF/ffffff">
</div>

修改：您无法在:after上使用:before或img，因为您可以在此处看到Demo，因为图片元素不包含文字或有后代，所以你可以做的是将img包装在div中，然后你得到这个Demo

在div

1 个答案: