多くの人々がテキストを調整し、フォント、色、サイズなどを変更するためにCSSを使用します。しかし、多くの人がしばしば忘れるのは、CSSを画像とともに使用できることです。
イメージ自体を変更する
CSSを使用すると、イメージをページに表示する方法を調整できます。これは、あなたのページの一貫性を維持するのに本当に便利です。すべての画像にスタイルを設定することにより、画像の標準的な外観を作成します。あなたができることのいくつか：
- 画像の周囲に輪郭や輪郭を追加する
- リンクされた画像の周りの色付きの枠を削除する
- 画像の幅や高さを調整する
- ドロップシャドウを追加する
- 画像を回転する
- 画像が上に乗ったときにスタイルを変更する
あなたのイメージを国境にすることは始めるのに最適な場所です。しかし、あなたは境界線以上のものを考慮する必要があります - イメージのエッジ全体を考え、マージンとパディングを調整する必要があります。細い黒い境界線を持つ画像はすばらしく見えますが、境界線と画像の間にいくつかのパディングを追加するとさらに見栄えが良くなります。
img { 国境：1pxソリッドブラック; パディング：5px;}
可能であれば、装飾されていない画像を常にリンクすることは良い考えです。しかし、あなたがそうするとき、ほとんどのブラウザが画像の周りに色のついた境界を追加することを忘れないでください。上記のコードを使用して境界線を変更しても、リンク上の境界線を削除または変更しない限り、リンクはその境界線を上書きします。これを行うには、CSSの子ルールを使用して、リンクされた画像の周囲の枠線を削除または変更する必要があります。
img> a { ボーダー：なし;}
CSSを使用して画像の高さと幅を変更または設定することもできます。ダウンロード速度のためにブラウザを使用して画像サイズを調整するのは良い考えではありませんが、画像のサイズを変更しても見栄えがよくなります。また、CSSを使用すると、イメージをすべて標準の幅や高さに設定したり、寸法をコンテナに対して相対的に設定したりすることもできます。
最高の結果を得るには、イメージのサイズを変更するときに、高さまたは幅のいずれかのサイズのみをサイズ変更する必要があります。これは、画像がアスペクト比を維持しているので、奇妙に見えることはないだろう。もう一方の値を オート ブラウザにアスペクト比の一貫性を保つように指示するために、そのままにしておきます。
img { 幅：50％; 高さ：自動;}
CSS3は、この問題に対する新しいプロパティの解決策を提供します オブジェクトフィット そして オブジェクトの位置。これらのプロパティを使用すると、正確な画像の高さと幅、およびアスペクト比の処理方法を定義できます。これにより、画像の周りにレターボックス効果が作成されたり、必要なサイズに収まるように画像がトリミングされたりすることがあります。
CSS3 オブジェクトフィット そして オブジェクトの位置 プロパティは広くサポートされていませんが、あなたのイメージを変更するために使用できる最新のブラウザでは、他のCSS3プロパティもサポートされています。ドロップシャドウ、丸みのあるコーナー、イメージを回転、スキュー、または移動するための変換は、現代の最新のブラウザーではすべて機能しています。次に、CSSトランジションを使用して、ホバーオーバー、クリック、または一定期間の経過後に画像を変更することができます。
画像を背景として使用する
CSSを使用すると、あなたのイメージで華やかな背景を簡単に作成できます。ページ全体または特定の要素だけに背景を追加できます。ページに背景画像を作成するのは簡単です 背景イメージ プロパティ：
体 { 背景画像：url（background.jpg）;}
変更 体 セレクタをページ上の特定の要素に追加して、背景を1つの要素に置きます。
あなたがイメージでできるもう一つの楽しみは、ウォーターマークのようにページの残りの部分でスクロールしない背景イメージを作成することです。あなたはスタイルを使用するだけです 背景添付：固定; あなたの背景イメージと一緒に。あなたの背景のための他のオプションには、 バックグラウンドリピート プロパティ。書きます バックグラウンドリピート：repeat-x; 画像を水平方向に並べ替える バックグラウンドリピート：repeat-y; 縦に並べます。また、背景画像を バックグラウンドポジション プロパティ。
CSS3では、あなたの背景にもスタイルを追加しています。任意のサイズの背景に合わせて画像を引き伸ばしたり、背景サイズをウィンドウサイズに合わせて設定したりできます。位置を変更して、背景画像をクリップすることができます。しかし、CSS3に関する最も良い点の1つは、複数の背景画像をレイヤーして、さらに複雑なエフェクトを作成できることです。
HTML5がスタイルイメージを助ける
ザ 図 HTML5の要素は、ドキュメント内に単独で置くことができるイメージの周りに配置する必要があります。それを考える方法の1つは、画像が付録に表示されるかどうかです。 図 素子。その要素と 描写 要素を使用してイメージにスタイルを追加します。
