CSSで画像を分割する方法

CSS で画像を分割する方法: 1. 背景画像属性と背景位置属性を使用して画像を分割します; 2. クリップ属性を使用して「clip:rect(y1, y2,x2, x1);" スタイルで画像をセグメント化します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

シナリオ: ページに小さな画像アイコンがある場合、ブラウザにアクセスすると、画像の読み込みにより閲覧速度が遅くなります。このとき、小さなアイコンをたくさん集めて 1 つの画像に統合すると、1 つの画像にアクセスするだけで済みます。画像リクエストの数を減らすことができます

統合画像

統合画像が利用可能になりました。毛織物の使用中に必要なピクセル範囲を取得するにはどうすればよいでしょうか?参考アドレスは上に書いてあります。またやります。

方法 1

CSS の要素の背景:background-color || background-image || バックグラウンド-リピート || 背景-添付ファイル || 背景-

背景:透明な URL(123.jpg) 繰り返しなしのスクロール -140px -20px;

透明とは、透明性を意味します。 color

url(123.jpg) は背景画像を意味します

no-repeat は画像が繰り返されないことを意味します

scroll は背景画像がブラウザのプルダウンでスクロールすることを意味します

-140px 水平位置が画像の -140px であることを示します (画像の左上隅を 0,0 とします)

-20px 垂直位置が - であることを示します画像の 20 ピクセル

しかし、上記の効果を見つけました。私が望むものには適していません。

上記の効果は右下のみを表示できます写真の隅。次に、2 番目の方法を試してください。

方法 2

img の Clip 属性で、rect,clip:rect(y1,y2,x2,x1) パラメータを使用します。

y1 = 位置決めy座標(縦方向)の始点

y2 = 位置決めy座標(縦方向)の終点

x1 = 位置決め x 座標の始点 (垂直方向)

x2 = 位置決め x 座標の終点 (垂直方向)

注: 座標の始点は上にあります。左隅

コードは次のとおりです:

    img{
        position:absolute;
        clip:rect(20px ,100px , 50px , 20px);
}

実際の操作中に、2 つの問題が発見されました: 1. Rect メソッドにはカンマが必要です。 , 2. 位置を含める必要があり、絶対位置である必要があります。また、絶対属性または固定属性である必要があります。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

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