ホームページ > 記事 > ウェブフロントエンド > CSS画像貼り合わせ技術について

CSS画像貼り合わせ技術について

不言オリジナル: 2018-06-12 15:05:571429ブラウズ

この記事では主に CSS 画像ステッチング技術を紹介します。これは、必要な友人に参考にしていただけるようになりました。

画像ステッチングは単一の画像の集合です。

多くの画像を含む Web ページの読み込みと複数のサーバーへのリクエストの生成に時間がかかる場合があります。

画像ステッチングを使用すると、サーバーリクエストの数が減り、帯域幅が節約されます。

画像ステッチ -- ナビゲーションリストの作成

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			#navlist {position:relative;}
			
			#navlist li{
				margin:0px;
				padding:0px;
				list-style:none;
				position:absolute;
				top:0px;
			}
			
			#navlist li, #navlist a{
				height:44px;
				display:block;
			}
			
			#home {
				left:0px;
				width:46px;
				background:url(&#39;./images/img_navsprites.gif&#39;)0 0;
			}
			
			#prev {
				left:63px;
				width:43px;
				background:url(&#39;./images/img_navsprites.gif&#39;)-47px 0;
			}
			
			#next {
				left:129px;
				width:43px;
				background:url(&#39;./images/img_navsprites.gif&#39;)-91px 0;
			}
			
		</style>
	</head>
	<body >
		<ul id="navlist">
		  <li id="home"><a href="/"></a></li>
		  <li id="prev"><a href="/css/"></a></li>
		  <li id="next"><a href="/css/"></a></li>
		</ul>
	</body>
</html>

分析例:

#navlist{position:relative;} - 相対位置を設定し、内部の絶対位置が決まるようにします
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - マージンとパディングは 0 に設定され、リストスタイルは削除され、すべてのリスト項目は絶対位置に配置されます
#navlist li, #navlist a{height:44px;display:block;} - すべての画像の高さは 44px です

次に、各特定のセクションの位置とスタイルを説明します:

# home{left:0px; width:46px;} - 一番左に配置し、画像の幅は 46px です
#home{background:url(img_navsprites.gif) 0 0;} - 背景画像とその位置 (左 0 ピクセル、上 0 ピクセル)
#prev{left:63px;width:43px;} - 右側に 63 ピクセル (#home 幅 46 ピクセル + 項目間の余分なスペース)、幅 43 ピクセルに配置されます。
#prev{background:url('img_navsprites.gif') -47px 0;} - 右に 47 ピクセルの背景画像を定義します (#home 幅 46 ピクセル + 仕切りの 1 ピクセル)
#next{left :129px; width:43px;}- 正しい位置は 129px (#prev 63px + #prev の幅は 43px + 残りのスペース)、幅は 43px です。
#next{background:url('img_navsprites.gif' ) no-repeat - 91px 0;} - 背景画像の右側に 91px を定義します (#home 46px+1px 分割線 + #prev Wide 43px+1px 分割線)

画像ステッチ -- ホバー効果

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			#navlist {position:relative;}
			
			#navlist li{
				margin:0px;
				padding:0px;
				list-style:none;
				position:absolute;
				top:0px;
			}
			
			#navlist li, #navlist a{
				height:44px;
				display:block;
			}
			
			#home {
				left:0px;
				width:46px;
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)0 0;
			}
			
			#home a:hover {
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)0 -45px;
			}
			
			#prev {
				left:63px;
				width:43px;
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)-47px 0;
			}
			
			#prev a:hover {
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)-47px -45px;
			}
			
			#next {
				left:129px;
				width:43px;
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)-91px 0;
			}
			
			#next a:hover {
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)-91px -45px;
			}
			
		</style>
	</head>
	<body >
		<ul id="navlist">
		  <li id="home"><a href="/"></a></li>
		  <li id="prev"><a href="/css/"></a></li>
		  <li id="next"><a href="/css/"></a></li>
		</ul>
	</body>
</html>

解析の例:

リスト項目にはリンクが含まれているため、次を使用できます: hover pseudo-class
#home a:hover{background:parents url(img_navsprites_hover.gif) 0 -45px;} - 3 つすべてホバー画像ごとに同じ背景位置を指定しますが、それぞれ下向きに 45px です

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

CSS画像貼り合わせ技術について

関連記事