CSS画像貼り合わせ技術について-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

不言

Jun 12, 2018 pm 03:05 PM

css

この記事では主に 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 を使用してさまざまな中央揃え方法を実現する

CSS を使用してシャドウ効果を実現する

CSS セレクターの問題について

以上がCSS画像貼り合わせ技術についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

擬似要素は子供であることを少し思い出させてください。Apr 19, 2025 am 11:39 AM

ここに＆＃039;いくつかの子供の要素を持つ容器があります：

「ダイナミックヒットエリア」のメニューApr 19, 2025 am 11:37 AM

フライアウトメニュー！ Hoverイベントを使用してメニュー項目をより多く表示するメニューを実装する必要がある2番目の場合は、トリッキーな領域にあります。 1つは、そうすべきです

WebVTTを使用したビデオアクセシビリティの改善Apr 19, 2025 am 11:27 AM

「Webの力はその普遍性にあります。障害に関係なくすべての人からのアクセスは重要な側面です。」

毎週のプラットフォームニュース：CSS ::マーカー擬似エレメント、事前レンダリングWebコンポーネント、サイトへのウェブメントの追加Apr 19, 2025 am 11:25 AM

今週、＃039;のラウンドアップ：DatePickersはキーボードユーザーのHeadachesを提供しています。これは、Foucとの戦いに役立つ新しいWebコンポーネントコンパイラであり、最終的にスタイリングリストのアイテムマーカーと、サイトでWebメントを取得するための4つのステップを手に入れます。

幅と柔軟なアイテムを作ることは、一緒にうまく機能しますApr 19, 2025 am 11:23 AM

簡単な答え：フレックスシュリンクとフレックスベイズは、おそらくあなたが探しているものです。

スティッキーヘッダーとテーブルヘッダーを位置付けますApr 19, 2025 am 11:21 AM

＆＃039; t position：sticky; a

毎週のプラットフォームニュース：検索コンソールでのHTML検査、スクリプトのグローバル範囲、Babel Envがデフォルトクエリを追加するApr 19, 2025 am 11:18 AM

今週のWebプラットフォームニュースの世界を見回すと、Google Searchコンソールによりクロールされたマークアップの表示が簡単になります。

indiebebとウェブメントApr 19, 2025 am 11:16 AM

indiewebは何かです！彼らは会議が近づいてきました。ニューヨーカーはそれについても書いています：

See all articles

ホットAIツール

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。