html - 使用 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;
}