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。

enter image description here

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

烨。只需确保设置一些padding，这样背景图像就会透过;演示：http://jsfiddle.net/jalbertbowdenii/p6fm4/1/

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

Answer 4

是的，您可以将背景图像放到图像上。

.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 5

是，

这是最简单的方法：

在CSS文件中

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

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

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

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

5 个答案: