Heim > Artikel > Web-Frontend > Informationen zur CSS-Bildstichtechnologie

Informationen zur CSS-Bildstichtechnologie

不言Original: 2018-06-12 15:05:571429Durchsuche

Dieser Artikel stellt hauptsächlich die CSS-Image-Stitching-Technologie vor, die einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

Image-Stitching ist eine Sammlung einzelner Bilder . .

Das Laden von Webseiten mit vielen Bildern und das Generieren von Anfragen an mehrere Server kann lange dauern.

Durch die Verwendung von Image Stitching wird die Anzahl der Serveranfragen reduziert und Bandbreite gespart.

Bildzusammenfügung – Navigationsliste erstellen

<!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>

Beispielanalyse:

#navlist{position:relative;} – Legen Sie die relative Positionierung fest, um die absolute Positionierung innerhalb der
#navlist li{margin:0;padding:0; -style:none;position:absolute;top:0;} – Rand und Abstand werden auf 0 gesetzt, der Listenstil wird entfernt und alle Listenelemente werden absolut positioniert
#navlist li, #navlist a{height:44px;display:block;} – Die Höhe aller Bilder beträgt 44px

Nun zur Positionierung und Gestaltung der einzelnen Abschnitte:

#home{left:0px;width:46px;} – Ganz links positioniert und die Breite des Bildes beträgt 46px
#home {background:url( img_navsprites.gif) 0 0;} – Definieren Sie das Hintergrundbild und seine Position (links 0px, oben 0px)
#prev{left:63px;width:43px ;} – rechts positioniert 63 Pixel (#home 46 Pixel breit + etwas zusätzlicher Abstand zwischen den Elementen), Breite 43 Pixel.
#prev{background:url('img_navsprites.gif') -47px 0;} – Hintergrundbild 47px nach rechts definieren (#home-Breite 46px + 1px der Trennlinie)
#next{left:129px;width:43px;}- Die rechte Position ist 129px (#prev 63px + #prev Breite ist 43px + verbleibender Platz), die Breite beträgt 43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} – Definieren Sie 91px auf der rechten Seite des Hintergrundbilds (#home 46px+1px Trennlinie + #prev width 43px+1px Trennlinie)

Bildzusammenfügung – Hover-Effekt

<!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>

Beispielanalyse:

Da das Listenelement einen Link enthält, können wir Folgendes verwenden: Hover-Pseudoklasse
#home a: hover{background: transparent url (img_navsprites_hover.gif) 0 -45px;} – Für alle drei Hoverbilder geben wir die gleiche Hintergrundposition an, jeweils nur 45px weiter unten

Das ist alles Ich hoffe, dass dieser Artikel zum Lernen aller beiträgt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Verwenden Sie CSS, um verschiedene Zentrierungsmethoden zu erreichen

Verwenden Sie CSS, um Schatteneffekte zu erzielen

Über Probleme mit der CSS-Auswahl

Das obige ist der detaillierte Inhalt vonInformationen zur CSS-Bildstichtechnologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fragen zu CSS-SelektorenNächster Artikel：Fragen zu CSS-Selektoren

In Verbindung stehende Artikel

Mehr sehen