CSS置換画像-フロントエンドQ&A-php.cn

CSS置換画像

WBOY

リリース： 2023-05-21 09:46:06

オリジナル

1054 人が閲覧しました

Web ページ制作において、画像は非常に重要な部分であり、CSS を使用して Web ページのスタイルをデザインする場合、一部の画像を置き換えることがよくあります。この記事ではCSSで画像を置き換える方法やテクニックを紹介します。

1. Background-image 属性

CSS では、background-image 属性を使用して背景画像を指定できます。具体的な方法は、CSS ルールで次のステートメントを使用することです。 ##

background-image: url("images/bg.jpg");

ログイン後にコピー

url() 内の引用符内の画像アドレスは、置換される画像のパスです。ここでのパスは HTML ファイル自体に対する相対パスであることに注意してください。相対パスを使用して HTML に CSS ファイルを導入する場合、CSS ファイル内の画像パスも HTML ファイルに対する相対パスに基づく必要があります。

2. 疑似要素: 前と後

CSS では、疑似要素とは、CSS スタイルを通じてドキュメントツリーに存在しない仮想要素を作成することを指します。擬似要素を使用すると、サイズや背景などの属性を設定するなど、通常の要素と同様に操作できます。

画像を置き換える場合、擬似要素を使用して追加の要素を追加し、画像を追加したような効果を得ることができます。具体的な方法は次のとおりです。

.selector:before {
    content: url("images/xxx.png");
}

ログイン後にコピー

上記のステートメントでは、.selector は画像を置き換える要素セレクターを示し、:before は疑似要素: before の使用を示します。 content 属性には、置換する画像のパスを指定できます。

:before または :after を使用する場合は、その content 属性を設定する必要があることに注意してください。設定しない場合、要素はレンダリングされません。

3. data-URI

CSS は、置換に外部画像ファイルを使用することに加えて、画像を Base64 エンコーディングの形式で CSS ファイルに直接埋め込むための data-URI メソッドも提供します。擬似要素と同様の効果を実現します。

具体的な方法は、画像をBase64エンコードに変換し、CSSスタイルのurl()のパラメータとして参照する方法です。例:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAboAAAAeCAYAAABx68HMAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goJ
CwohK6HlJQAAAN9JREFUKM+1kktugjAQxV/YRlLCTURzR91i9CGdqutj6zzDJj0moR9k6dpig7Oy4Bw+W0VNF/czNMcxqiX/wV9FzPE2DzjHyy/jVpefCvzXdCBN9+7Z
TDDNwqsOo +x +8/gqgGJr2HmJ4+kX9C0pvgCv3teUPpEWoFJpALyxqsdmFedW2++krT / JWbXEWddLqEBWLt + 8DfMvqNFL/QFSjufVYrk5Dr/tFNSSUZLTELPVdQAAAABJRU5ErkJggg==);

ログイン後にコピー

この方法の利点は、HTTP リクエストを削減できるため、Web ページの読み込み速度が向上することです。ただし、Base64 エンコードでは画像コンテンツが大きくなり、大きな画像を使用するとページの読み込み速度が低下するため、特定の状況に応じてトレードオフを行う必要があることに注意してください。

つまり、画像の置換は Web ページ制作における一般的なスタイルデザイン要件であり、CSS はこの要件を達成するためのさまざまな方法を提供します。ページ効果をより優れたものにするためには、実情に応じて適切な方法を選択する必要があります。

以上がCSS置換画像の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。