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

Question

我有这张照片：

我想要这张照片：

要超越图片，所以我得到了这个＆＃34;点效应＆＃34;。

我还必须重复这张照片，以便适合另一张照片。我设法将它们放在同一个地方，但从来没有让第二个重复在第一个。

请帮忙。我在过去的两天里用Google搜索了这个并且无法解决这个问题。

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>

Answer 2

使用第一个图像作为主背景，而不是使用position: absolute和另一个元素上的背景图像将溺爱的图像放在第一个图像上。为什么叠加背景图像？这是因为您可以为背景设置background-repeat属性（默认为重复x和y）。

＆＃13;

＆＃13;

.wrapper {
  float: left;
  position: relative;
}
.overlay {
  background: url("http://i.stack.imgur.com/G9pqm.png") repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;