1

境界線が 1 px の div があります。div 48px * 48pxよりもはるかに小さい四角い透明部分のpng画像があります。

正方形の画像を div の左上の境界線に重ねて、画像の下にある上と左の境界線の両方の外観を与えるように配置したいと思います。

background-image 'left top' を使用すると、画像が div 境界内に配置されますが、これは私が探しているものではありません。例を示したいのですが、何もありません。私の質問がそれをうまく説明してくれることを願っています。

JSFiddle は次のとおりです: http://jsfiddle.net/9sn22/1/

<div id='mybox'>text</div>

#mybox {
text-indent: 0.5in;
background-image:url('http://aerbook.com/site/images/quote-mark-icon-black.png');
border-radius:3px;
border: 1px solid #cccccc;
height: 300px;
font-weight: 200;
text-indent: 0.35in;
padding: 20px;
background-repeat:no-repeat;
background-position: left top;
}
4

3 に答える 3

4

達成しようとしている目的の効果の画像やデモがないため、静かに質問することはできませんが、私が理解したことからposition: relative;、コンテナーに使用して、内部divでリテラルタグを使用し、および でそれぞれ使用できます。imgdivposition: absolute;top: -1px;left: -1px;

要素領域の外に移動しようとしている場合はbackground-image、それが不可能です...imgこれを使用する必要があります

<div>
   <img src="#" />
</div>

div {
   position: relative;
   border: 1px solid #000;
}

img {
   position: absolute;
   left: -1px;
   top: -1px;
}

更新：（デモを追加した後）

このようなものが必要ですか？

于 2013-06-24T05:27:38.820 に答える