html - 在其他图片上叠加和复制图片

Question

我有这张照片:

我想要这张照片:

在图片上，所以我得到了这种“点效应”。

我还必须重复图片以使其适合另一张。我设法将它们放在同一个地方，但从未让第二个重复第一个。

请帮忙。在过去的 2 天里，我用谷歌搜索了这个，但无法弄明白。

Answer 1

你可以使用多个背景图片

.avatar {
  width: 180px;
  height: 180px;
  background-image: url(http://i.stack.imgur.com/G9pqm.png), url(http://i.stack.imgur.com/DSToa.png);
  background-repeat: repeat, none;
}

<div class="avatar"></div>

或者，HTML 中的实际图像和伪元素叠加层。

.avatar {
  width: 180px;
  height: 180px;
  position: relative;
}
.avatar::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(http://i.stack.imgur.com/G9pqm.png) repeat;
}

<div class="avatar">
  <img src="http://i.stack.imgur.com/DSToa.png" alt="" />
</div>