在 div 上添加叠加图案 (png)

Question

有没有办法使用 HTML 在特定 div 中使用图像 url 添加叠加层？

我设法使用 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;
}

但这有点棘手。当我尝试对其他 divs 做同样的事情时，它没有用。例如，我有一个 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;
}

更新：

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>

编辑：您不能在 img 上使用 :after 或 :before，如您在此处所见 Demo because image elements don't contain text or have descendants, so what you can do is wrap img in div for example and then you get this Demo

在 div 上添加叠加图案 (png)

Add an overlay pattern (png) over a div

html

css

overlay