每日一個css效果之css sprites

時間 2019-12-14

標籤每日一個 css 效果 sprites 欄目 CSS 简体版

原文原文鏈接

爲何要是用css sprites

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.css

使用css sprites是減小圖片資源請求次數的首選方法。將一些背景圖片組合到一張圖片中，並在css文件中使用background-image和background-position屬性展現須要的圖片部分。html

以上是雅虎web性能優化最佳實踐中的Minimize HTTP Requests(減小http請求次數)中的一個策略，使用css sprites。web

並非全部的圖片都須要組合到一塊兒，須要組合的圖片：ico、圖標等小型圖片。大型的圖不須要應用css sprites。性能優化

實現方式

1.首先把須要的圖標利用ps等工具合成到一張圖片中，例如工具

2.編寫css樣式

在編寫展現圖片的時候要注意兩點：性能

圖片的定位
圖片容器的寬和高

因爲css sprites主要的應用是展現圖標等小型圖片，一般須要與其餘元素展現在一行中，因此在編寫css代碼時有一個很方便的技巧是將容器的display屬性設置爲inline-block，既能夠方便的設置容器的寬和高又能夠與其餘須要的元素共處一行，例如：優化

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>home</title>

	<style> .ico { height: 16px; width: 16px; display: inline-block; background-image: url("images/ico.png"); } .ico-alert { background-position: 0 0; } .ico-word { background-position: -24px 0; } .ico-excel { background-position: -48px 0; } .ico-ppt { background-position: -72px 0; } .ico-pdf { background-position: -96px 0; } .ico-txt { background-position: -120px 0; } a { display: inline-block; width: 35px; text-align: center; margin: 5px; text-decoration: none; } </style>
</head>
<body>
	<div>
		<span class="ico ico-alert"></span><a href="#">alert</a>
		<span class="ico ico-word"></span><a href="#">word</a> <br>
		<span class="ico ico-excel"></span><a href="#">excel</a>
		<span class="ico ico-ppt"></span><a href="#">ppt</a> <br>
		<span class="ico ico-pdf"></span><a href="#">pdf</a>
		<span class="ico ico-txt"></span><a href="#">txt</a>
	</div>
</body>
</html>
複製代碼

效果以下 ui

其核心代碼爲

/* 設置容器的高度,寬度和圖片 */
.ico {
	height: 16px;
	width: 16px;
	display: inline-block;
	background-image: url("images/ico.png");
}
/* 定位顯示的背景 */
.ico-alert {
	background-position: 0 0;
}
複製代碼