CSS Sprite が画像ステッチ技術を実装する方法-CSSチュートリアル-php.cn

1. スプライトの使用シナリオ:

2. CSS スプライト (利点)

3. 実装原則

cssのbackground-position

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS Sprite が画像ステッチ技術を実装する方法

Jul 21, 2018 am 10:38 AM

この記事では、Css スプライトを使用して画像ステッチ技術を実装する方法を説明します。必要な方はぜひ参考にしてください。

1. スプライトの使用シナリオ:

CSS Sprite が画像ステッチ技術を実装する方法

2. CSS スプライト (利点)

画像のバイト数を削減します。
Web ページの http リクエストを減らすことで、ページのパフォーマンスが大幅に向上します。
は、画像のコレクションに名前を付けるだけで済むため、Web ページ制作の効率が向上します。
スタイルを変更するのは簡単です。1 つまたは数枚の画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスがより便利になります。

3. 実装原則

cssのbackground-position

はレイヤー上に表示できる領域のサイズを制御し、
背景画像をウィンドウを通してスライドさせます
例:
CSS Sprite が画像ステッチ技術を実装する方法

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>background-position<</title>
        <link rel="stylesheet" href="index.css"/>
    </head>
    <body>
        <span class="oo span1"></span>
        <span class="oo span2"></span>
        <span class="oo span3"></span>
        <span class="pp span4"></span>
        <span class="ll span5"></span> 
        <span class="hh span6"></span> 
         
    </body>
</html>
.body{
    margin:0 auto;    
    text-align:center;
}
.oo{    
display:block;    
width:43px;    
height:44px;    
background:url(images/img_navsprites_hover.gif) no-repeat;
    margin:20px auto;
}
.span1{    
background-position:0 0;    
position:absolute;
    top:0px;
}
.span2{    
background-position:-47px 0;    
position:absolute;
    top:0px;
    left:60px;
}
.span3{    
background-position:-94px 0;    
position:absolute;
    top:0px;
    left:120px;
}
.span1:hover{    
background-position:0 -45px;
}
.span2:hover{    
background-position:-47px -45px;
}
.span3:hover{    
background-position:-94px -45px;
}
.pp{    
display:block;    
width:38px;    
height:38px;    
background:url(images/pwd-icons-new.png) no-repeat;
     
    margin:20px auto;
}
.span4{    
background-position:-48px -96px;
}
.ll{    
display:block;    
width:24px;    
height:26px;    
background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat;
    margin:20px auto;
}
.span5{    
background-position:0 -483px;
}
.hh{    
display:block;    
width:18px;    
height:18px;    
background:url(images/toolbars.png) no-repeat;
    margin:20px auto;
}
.span6{    
background-position:-95px -211px;
}

ログイン後にコピー

**background-position: npx npx;
(最初の値は左右を調整します。背景画像を右に調整する必要がある場合は、正の値を使用します。同様に、背景を調整します。画像を上下に移動する場合、上部は負の値を使用し、下部は正の値を使用します) **
エフェクトの画像は次のとおりです。
(これは元の画像です)

CSS Sprite が画像ステッチ技術を実装する方法