使背景 属性 像叠加层一样工作

Question

我知道这个问题有点奇怪。但对此很好奇。我们可以让背景 属性 像叠加层一样工作吗？不使用任何额外的 html 标签。

例如，

<img style="background: url('some image url to be overlayed on the actual image')" src="image src which will be hidden under the background image" alt="">

可能吗？

Answer 1

您可以这样做，但您必须填充叠加图像以显示其背景：

#img{
    height: 20; // Front image height
    width: 20;  // Front image width
    padding: 50px 80px; // needs to be adjusted depend on your BG img size
    background-image: url('path_to_image');
    background-repeat: no-repeat;
}

Answer 2

你的意思是这样的吗？我用 padding 作为尺寸。

img {
    padding-bottom: 35%;
    width: 500px;
    background: url(https://homepages.cae.wisc.edu/~ece533/images/airplane.png);
    height: 0;
}

<img  src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" alt="" title="test">