使用 CSS，我可以在该对象之外指定背景图像吗？答案

【问题标题】：Using CSS, Can I specify a background-image outside that object?使用 CSS，我可以在该对象之外指定背景图像吗？
【发布时间】：2012-04-08 16:29:48
【问题描述】：

我有一个这样的对象：

<div class="myObject">My Object</div>

我想在<div> 的盒子前面显示一个图像，我认为这样的代码可以工作：

.myObject {
    background-image: url(foo.png);
    background-position: 0px -20px;
}

但是，不幸的是，这不起作用。

如何使用 CSS 实现这个目标？

PS：我想要的只是在该标签的框外显示该图像，不要告诉我这样做：

.myObject {
    padding-left: 10px;
    background-image: url(foo.png);
    background-position: 0px 0px;
}

谢谢。

【问题讨论】：

标签： html css styles

【解决方案1】：

您不能在框外的元素上放置背景图像。

要将图像放置在元素的左侧，使用纯 CSS，可以使用 :before 伪元素：

演示：http://jsfiddle.net/2HEpn/

.myObject:before {
    content: " ";
    background-image: url("/favicon.ico");  /* a 16x16 image, for example */
    width: 16px;
    height: 16px;
    display: inline-block;  /* pseudo-elements are inline by default */
}

【讨论】：

非常感谢，但在这种情况下：link 我可以在那个红色空间前面显示那个图标吗？
@UniMouS 可以通过使用负左边距将元素移到外面：jsfiddle.net/2HEpn/3。 CSS 中不存在父选择器，因此无法移动容器

【解决方案2】：

您可能需要将它相对地放置在对象内，正如我从 u 到 div 所理解的那样

#img{
position:absolute;
top:0px;
left:-30px;
}
.myobject{
position:relative;
width:30px;
}

【讨论】：