您可以将背景图像设置为图像吗？

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 的“检查元素”我可以看到背景的路径是正确的。它只是没有显示在浏览器中。下面是我想要的效果。顺便一提。前景图像尺寸为 258x258（带边框），背景图像尺寸为 258x40。

Answer 1

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

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

将背景位置设置为0 0 以外的其他值是不够的；无论背景位置设置为什么，背景都不会超出元素所占据的区域（包括内边距，但不包括边框和边距）。

Answer 2

这是一个使用容器元素和 CSS :after的解决方案

Demo fiddle

HTML

<div id="content">
    <div class="img-container">
        <img src="http://placehold.it/258x258" alt="image" class="img-shadow" />
    </div>
</div>

CSS

#content img {
    border:4px solid #ffffff;
    vertical-align: top;
}
.img-container{
    position: relative;
    display:inline-block;
}
.img-container:after {
    content: url('http://placehold.it/258x40');
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
}

更新

并使用 CSS3 box-shadow

Demo fiddle

.img-container:after {
    content: '';
    display: block;
    position: absolute;
    top: 90%;
    right: 0;
    height: 20px;
    width: 258px;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    z-index: -1;
}

Answer 3

是的，您可以将背景图像添加到图像中。

.your-image{
    padding-bottom:18px; /* <-- height of texture image */
    background:transparent /* <-- to manage some-transparent.png don't set a bgColor */
    url(txtr-bottom-shadow-divider.png) /* <-- Your bottom right texture */
    no-repeat /* <--  */
    100% /* <-- align right */
    100% /* <-- align bottom */
    scroll  /* <-- avoid Yoda trolling for spam abuse. Joke */;
}

你注意到填充了吗？它是显示背景纹理，否则，图像将占用 100% 的可用空间（宽度和高度），因此您将看不到任何东西。

Answer 4

是的。只要确保你设置了一些padding，这样背景图像就会被窥视；演示：http://jsfiddle.net/jalbertbowdenii/p6fm4/1/

通过删除所有填充更新小提琴。要获得所需的“窥视”效果，请将您正在窥视的两个角设置为一点点填充，其他的设置为 0。就像这样：http://jsfiddle.net/jalbertbowdenii/p6fm4/5/

Answer 5

是的，

这是最简单的方法：

在您的 CSS 文件中

body
    {
    background-image:url('img-shadow.png'); 
    background-repeat:repeat-x;
    background-position:center; 
    background-size: 100% 100%;
}

它将为您网站的每个页面设置它

您不需要为背景图像使用 IMG 标记。这是在 css 中设置背景图像的最佳形式，这样您就可以轻松地将项目分层。使用 IMG 标签，您需要确保放置在它上面的所有东西都是绝对定位的，因此它不会移动。这是一个巨大的痛苦。祝你好运