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

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不够的; 无论背景位置设置为什么,背景都不会超出元素占用的区域(包括填充,但不包括边框和边距).