1

我正在尝试在 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。

在此处输入图像描述

4

5 回答 5

5

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

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

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

于 2013-08-01T17:37:46.857 回答
2

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

演示小提琴

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

更新

并使用 CSS3box-shadow

演示小提琴

.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;
}
于 2013-08-01T19:27:56.137 回答
0

对。只需确保您设置了一些padding，以便背景图像可以窥视；演示：http: //jsfiddle.net/jalbertbowdenii/p6fm4/1/

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

于 2013-08-01T17:46:19.563 回答
0

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

.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% 的可用空间（宽度和高度），因此您将看不到任何东西。

于 2013-08-01T19:15:58.630 回答
-1

是的，

这是最简单的方法：

在你的 CSS 文件中

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

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

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

于 2013-08-01T17:37:44.893 回答