1

私はこのようなオブジェクトを持っています：

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

ありがとうございました。

4

2 に答える 2

7

ボックスの外側の要素に背景画像を配置することはできません。

純粋な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 */
}
于 2012-04-08T16:32:44.323 に答える
0

私がuからdivまで理解しているように、オブジェクト内に比較的配置する必要があるかもしれません

#img{
position:absolute;
top:0px;
left:-30px;
}
.myobject{
position:relative;
width:30px;
}
于 2012-04-08T16:52:56.527 に答える