html - 你能为图像设置背景图像吗？

Question

我正在尝试在 img 标签上设置背景图片。这可能吗？

我的 HTML:

<div id="content">
<img src="my-image.jpg" alt="image" class="img-shadow">
</div>

我的 CSS:

#content img {
    float:right;
    margin:0 0 15px 15px;
    border:4px solid #ffffff;
}
.img-shadow {
    background-image:url('img-shadow.png');
    background-repeat:no-repeat;
    background-position:0 232px;
}

使用 Chrome 的“Inspect Element”我可以看到背景路径是正确的。它只是没有出现在浏览器中。下面是我想要的效果。顺便一提。前景图像尺寸为 258x258(带边框)，背景图像尺寸为 258x40。

Answer 1

没有透明度和填充的图像将掩盖它自己的背景图像。具有背景图像的图像确实有效，前提是背景图像有一些间隙可以显示出来。

如果您只想在图像周围显示背景图像，则在图像周围添加填充就足够了。如果您不喜欢填充占用空间，则可以设置相同大小的负边距。

将背景位置设置为 0 0 以外的值是不够的；无论背景位置设置成什么，背景都不会超出元素所占据的区域(包括padding，但不包括border和margin)。