使用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 */
}