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