CSSのスプライトによる画像切り抜き技術の実装方法（コード添付）-CSSチュートリアル-php.cn

CSSのスプライトによる画像切り抜き技術の実装方法（コード添付）

yulia

リリース： 2018-09-11 15:31:34

オリジナル

1741 人が閲覧しました

CSS スプライトの利点と欠点

利点

1. CSS スプライトを使用すると、Web ページの http リクエストを効果的に削減できるため、ページのパフォーマンスが大幅に向上します。これは CSS スプライトの最大の利点でもあります。また、広く普及しています。 2. CSS スプライトは画像のバイト数を削減できるため、3 つの画像を 1 つの画像に結合した場合のバイト数は常に小さくなります。この3枚の画像。
3. 画像の名前を付ける際の Web デザイナーの問題を解決します。画像のコレクションに名前を付けるだけで済むため、Web ページの制作効率が向上します。
4. スタイルを変更するのは簡単です。1 つまたはいくつかの写真の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスがより便利になります。

欠点

CSS スプライトが非常に強力であることは事実ですが、次のような無視できない欠点もあります。

1. 画像を結合するときは、複数の画像を 1 つの画像に順番に結合する必要があります。合理的な方法で、セクションに不要な背景が表示されないように十分なスペースを残しておきます。これらは問題ありませんが、最も問題となるのは、ワイドスクリーンや高解像度の画面でのアダプティブページです。画像の幅が十分でない場合、簡単に表示されます。背景が壊れています
2. CSS スプライトは、Photoshop などのツールを使用して正確な位置を測定し、計算する必要があります。これは、難しいことではありませんが、非常に面倒です。 Tencent のゴースト兄弟は、ADOBE AIR を使用して CSS スプライトスタイル生成ツールを開発しました。これはまだ使用には柔軟性がありませんが、Photoshop で測定するよりもはるかに便利で、スタイルを直接生成、コピー、コピーできます。
3. CSS スプライトはメンテナンスがより面倒です。ページの背景が少し変更されると、通常、変更する必要のない部分は変更しないことが最善です。オリジナルにある場合は css を追加します。スペースがない場合は、(できれば) 下部に画像を追加するだけで、画像のバイト数が増え、CSS が変更されます。
4.CSS スプライトは、特にページに大量の icos (アイコン) がある場合、学習して適用する価値があります。つまり、多くの場合、CSS スプライトを使用するかどうかを決定する前に、長所と短所を比較検討する必要があります。

HTMLコード:

<body>
<!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} -->
<!-- 以上是Sublime Text快速拼写 -->
<ul class="sprite">
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<div class="clear"></div>
</ul>
</body>

ログイン後にコピー

CSSコード:

<style>
body { background-color: #fc0; color:#333;}
* {margin:0; padding:0;}
ul,li {list-style: none;}
a { color:#f00; font-weight: bold; text-decoration: none;}
.sprite {margin:0 auto; width:1000px; padding-top: 50px;}
.sprite li {float:left; margin-left: 50px; text-align: center; cursor:pointer; }
.sprite li s { display: block; width:132px; height:112px; background:url(all.png) no-repeat; }
.clear { clear:both;}
</style>

ログイン後にコピー

JSコード:

<script src="<a href="http://code.jquery.com/jquery-latest.js"></script">http://code.jquery.com/jquery-latest.js"></script</a>>
<script>
$(function () {
var iconH = $(".sprite").find("s").height(),
//找出存放图片的容器的高度;
triggerLi = $(".sprite").children("li");
//找出每一个li,放到一个数组中;
//console.log(iconH);
//在控制台打印出容器的高度;
triggerLi.each(function () {
//遍历数组中的每一个li
var $this = $(this),
//声明变量赋值当前的li;
$index = $this.index();
//声明变量保存当前li的index值;
//console.log($index);
//在控制台打印出每一个li的index值;
//console.log(iconH*$index);
//得出每一个图片对应的position值;
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
//利用js遍历出每一个s标签的背景图片;
$this.hover(function() {
//鼠标移入
$this.children("s").css("background-position","-132px -"+iconH*$index+"px");
}, function() {
//鼠标移出
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
});
})
})
</script>

ログイン後にコピー

以上がCSSのスプライトによる画像切り抜き技術の実装方法（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。