Question

我正在设计一个音乐节的小网站，我想我可以让主页看起来像我们设计的海报。所以我想做的是将该海报的单层（即背景和乐队的标识等）保存为pngs，这样我就可以将海报的背景作为网站的背景然后放置徽标在它上面的层等（当它完成时，我想为它们制作一点动画，但首先是第一件事）。我已经尝试了background-img属性，但是这样，我似乎无法按照我想要的方式调整图像大小。所以我试过这样：

<body>
<img src="background.png" class="bg">
<img src="img/01_Headline.png" class="header">
</body>

这使得背景img以我想要的方式出现，但当然这会将我想要的其他徽标放在background.png之上。

Answer 1

尝试这样的事情：

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.bg {
  z-index: 1;
}
.header {
  z-index: 3;
}

<body>
  <img src="https://placehold.it/200/333333" class="bg">
  <img src="https://placehold.it/100" class="header">
</body>

更好的方式：

.bg {
    background: url("https://placehold.it/200/333333");
    background-repeat: no-repeat;
}

<body>
  <div class="bg">
    <img src="https://placehold.it/100" class="header">
  </div>
</body>

在图像上的Html图像

1 个答案: