5 ![]()
知っておくべきCSSプロパティ
背景画像、境界線画像、マスキング、クリッピングなどのCSSプロパティがあります。 直接画像を追加 Webページにアクセスし、それらの動作を制御します。ただし、あまり言及されていない画像関連のCSSプロパティもあります。 で追加された画像を処理する
これらの後者の特性の仕事の説明はから異なります 影をコントロールする に シャープネスを設定する, 画像の外観や位置を調整するのに役立ちます。
1.で画像をシャープにする 画像レンダリング
画像が拡大されると、ブラウザは 画像を滑らかにする, そのため、ピクセル化されているようには見えません。しかし、画像や画面の解像度によっては、これが常に最良とは限りません。このブラウザの動作は、 画像レンダリング 財産.
このよくサポートされたプロパティ 画像の拡大縮小に使用されるアルゴリズムを制御します。. その2つの主な値は ぱりっとした縁 そして ピクセル化.
の ぱりっとした縁 値 ピクセル間の色のコントラストを維持. 言い換えれば、画像にスムージングは行われません。 ピクセルアートワークに最適.
いつ ピクセル化 が使用されている場合、ピクセルの近くのピクセルが その外観を取ります, それを一緒にしているように見せる 一つの大きなピクセルを形成する, 高解像度スクリーンに最適.
下のGIFの花の端をよく見てみると、通常のGIFと通常のGIFの違いがわかります。 ピクセル化 画像.
img 画像レンダリング：ピクセル化;
2.画像を引き伸ばす オブジェクトフィット
の 含む, カバー, 塗りつぶし 値はすべておなじみのものです。 背景サイズ 背景画像がそれが属する要素をどのように埋めるかを制御するプロパティ。の オブジェクトフィット それはまたそれを決定するので、プロパティはそれに非常に似ています コンテナ内の画像のサイズ.
の 含む 値 そのコンテナー内にイメージを含みます. カバー 同じことを行いますが、画像とコンテナの縦横比が一致しない場合は、 画像が切り取られる. 塗りつぶし 画像を コンテナーを引き伸ばして塗りつぶす. 縮小 画像の最小バージョンを選択します 表示する.
#container 幅：300px;高さ：300ピクセル。 img 幅：100％;身長：100％。オブジェクトフィット：含む。
3.で画像をシフト
オブジェクト位置補完と同様
背景位置の財産背景サイズ, ありますオブジェクト位置のプロパティオブジェクトフィット, も.の
オブジェクトフィット財産 画像を移動する 画像コンテナ内 与えられた座標へ. 座標は次のように定義できます。 絶対長の単位, 相対長さの単位, キーワード （上,左,センター,底, そして右）、または それらの有効な組み合わせ （上20ピクセル右5ピクセル,中央右80ピクセル）.4.で画像をシチュエーション
垂直整列たまに追加
テキスト文字列の横にある（これは本質的にインラインです） 追加情報や装飾用. その場合, テキストと画像を揃える 目的の位置に移動するには少し注意が必要です。使用するプロパティがわからない場合.の
垂直整列財産は テーブルセルだけに限定されない. インラインボックス内のインライン要素を整列させることもできます。 画像をテキスト行に揃える. それはインライン要素に適用できるかなりの数の値を取るので、あなたはから選ぶ多くのオプションがあります.
5.影付き画像
フィルター：drop-shadow（）テキストやボックスで目立たないように使用すると、影がWebページに命を吹き込むことがあります。同じことが画像にも当てはまります。. コア形状と透明な背景を持つ画像 から恩恵を受けることができます
影を落とすCSSフィルター.その引数は シャドウ関連のCSSプロパティの値と同様 （
テキスト影,ボックスシャドウ）最初の2つは 垂直方向と水平方向の距離 影と画像の間の3番目と4番目は ぼかし そしてその 影の広がり半径, そして最後のものは 影の色.と同じように
テキスト影,影を落とすである影も作成します 所属オブジェクトに成形. そのため、画像に適用すると、影は画像の可視部分の形状になります。.img filter：drop-shadow（0 0 5px blue）;また読む： CSS3画像の反射[CSS3のヒント]
">
#container 幅：300px;高さ：300ピクセル。 img 幅：100％;身長：100％。オブジェクトフィット：含む。 
