17


4

含まれているdivの境界の外側に背景画像を配置する

背景画像を実際のdivの外側に設定しようとしています。

Show Details

.expandable
{
    background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}

そのため、「エキスパンド」画像は基本的にdivの左側に表示されるはずです。

私はこれを動作させることができません、コンテナの境界の外側に配置されたときに画像が表示されません。 欠けているCSSトリックがあるのか​​、それともページレイアウトに関係するものなのかわかりません(「拡張可能な」divは他のいくつかのdiv内にネストされています)。

これは可能ですか? 何かヒントは?

編集:ここに問題を示すjsFiddleがあります:http://jsfiddle.net/QbUGk/[link]

4 Answer


22


私はこれが古いスレッドであることを知っていますが、それを更新し、CSS疑似要素を使用してこれが可能であることを追加したかっただけです。

.class:before {
    content: "";
    display: inline-block;
    width: {width of background img};
    height: {height of background img};
    background-image: url("/path/to/img.png");
    background-repeat: no-repeat;
    position: relative;
    left: -5px; //adjust your positioning as necessary
}


16


背景画像を別の要素内に配置する必要があります。 背景画像の位置は、適用される要素の外側に画像を配置できません。

_edit_あなたの質問は私の記憶を揺さぶり、私は行ってCSSの仕様を確認しました。 実際には、設定できる「background-attachment」CSS属性があります。これは、要素の代わりにビューポートに背景を固定します。 ただし、IEでバグがあるか壊れているため、頭の「使用しない」シェルフに座っているのはこのためです:-)

edit —この回答は2010年のものであり、2016年にはより新しい(さらに重要なことに、広くサポートされている)CSS機能が存在することに注意してください。


8


これを正確に行うことはできませんが、非常に簡単な解決策があります。 次のように、 `.expandable`内に別のdivを配置できます。

Show Details

その場合、CSSは次のようになります。

.expandable{ position:relative; }
.expandable-image{
    position:absolute; top:0px; left:-20px;
    width:px; height:px;
    background: url('./images/expand.gif') no-repeat;
}