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

Question

我有一个这样的对象：

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

谢谢。

Answer 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 */
}

Answer 2

您可能需要将其相对地放置在对象中，正如我从您对div 的理解

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