CSS Content プロパティを使用して画像を Div に埋め込む方法

CSS を使用して画像を Div に組み込む

多くのユーザーは、div を適応させながら CSS スタイルの div 内に画像を表示するソリューションを求めています。画像の寸法。この記事ではこの問題に対処し、HTML 要素

の機能を複製する効率的な方法を提供します。 CSS を使用。

提案された手法では、CSS 内の content プロパティを利用して、目的の画像を div に挿入します。その方法は次のとおりです:

1. 指定されたクラスを使用して div 要素を作成します。たとえば:

   <code class="html"><div class="image"></div></code>

2. CSS 内で、次のスタイルをクラスに追加します:

   <code class="css">div.image::before {
   content:url(http://placehold.it/350x150);
   }</code>

この例では、http://placehold.it/350x150 が画像の URL を表します。

このアプローチでは、画像を基準にしてサイズを調整する div の機能を維持しながら、画像を div に取り込みます。ライブ デモンストレーションを表示するには、次のリンクにアクセスしてください: http://jsfiddle.net/XAh2d/。

詳細については、http://css-tricks.com/css-content/ を参照してください。 CSS コンテンツの包括的なガイド。

互換性:

この手法は、Chrome、Firefox、Safari (MacOS) で正常にテストされています。 Internet Explorer をお持ちの場合は、その経験を共有してください。

以上がCSS Content プロパティを使用して画像を Div に埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。