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

Question

我知道这是一个有点奇怪的问题。但对此非常好奇。我们可以使背景属性像覆盖一样工作吗？不使用任何额外的HTML标签。

E.g，

<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 {
    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">

Answer 2

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

#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;
}