12

これは私の最近の質問への追加です: 疑似要素を使用して、含まれている要素を絶対位置の要素をラップするようにすることは可能ですか (clearfix のように)?

JSFiddle: http://jsfiddle.net/derekmx271/T7A7M/

疑似要素を使用して、絶対位置の画像を「クリアフィックス」しようとしています。スライドの後ろに同じ画像を表示できるようになりましたが、挿入された画像に幅を適用できないようです。私は気が狂っていますか、コンテンツがコンテンツである疑似要素に幅を適用できないでしょうか: url(img/image.jpg)? display:block などのさまざまなバリエーションを試してみましたが、役に立ちませんでした...

#slider ul:after {
  content: url(http://www.cs7tutorials.com/img/slide1.jpg);
  display: block;
  position:relative;
  width:70px;
}

疑似要素の画像の幅を 100% に、最大幅を 800px に設定して、スライドと同じサイズにする必要があります。

4

3 に答える 3

28

、、、、または CSS グラデーションを使用して挿入contentされたかどうかにかかわらず、を使用して挿入された画像の寸法を変更することは実際には不可能です。画像は常にそのままレンダリングされます。これは、置換されたコンテンツまたは置換された要素として知られています (ただし、ここでは要素について話しているわけではありません)。url()image()image-set()element()

ただし、CSS2.1 仕様のセクション 10 で説明されているように、置換された要素は と を使用してサイズ変更できるため、ここでプロパティが適用されないように見える理由について疑問が生じます。これに対する答えは、プロパティは適用されますが、代わりに疑似要素ボックスに適用されるということです。これは、疑似要素に背景色を指定することで確認できます。疑似要素ボックス自体を置き換えるのではなく、画像は疑似要素ボックスの子としてレンダリングされるため、まったくスタイルを設定できません (存在しない別の疑似要素が必要になるため)。widthheight

そして、それは別の質問に役立ちます:なぜ疑似要素ボックスを完全に置き換えないのですか? 残念ながら、CSS2.1 ではこの動作がまったく指定されていないため、合意された実装では、代わりに疑似要素ボックスの子としてコンテンツをレンダリングします。

CSS2.1 は、::before と ::after の「コンテンツ」の処理モデルを明確に定義していませんが、CSS 2.1 の有益な例、「コンテンツ」が物事のリストを指定しているという事実、および一貫性の欲求UA の動作は次のようになりました: 「コンテンツ」プロパティは、::before または ::after ボックスの子になるもののリストを指定します。

-ボリス

これは、書き換え作業が始まったばかりの CSS 生成コンテンツ レベル 3 でさらに対処されることを願っています。

:afterそれまでの間、疑似要素と生成された画像のサイズを変更できるようにしたい場合は、代わりに背景画像として適用する必要があります — ブラウザのサポートが問題ではないと仮定して —background-sizeと一緒に使用widthしheightてスケーリングします(代わりに、これらのプロパティが疑似要素ボックスに適用されるという理解に基づく)。

于 2013-02-20T12:01:31.410 に答える
0

http://jsfiddle.net/T7A7M/12/を使用してデモをご覧background-imageください。

于 2013-02-20T11:57:13.583 に答える