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 サイトの他の関連記事を参照してください。