CSS雪碧的那些事兒

時間 2020-06-20

標籤 css 雪碧那些事兒欄目 CSS 简体版

原文原文鏈接

CSS雪碧即 CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。

CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減小你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。

實現效果的實例：

div {
width: 25px;
height: 25px;
background-image: url(img/568dfdbdN4f7d7ca3.png);
overflow: hidden;
}css

p {
width: 25px;
height: 25px;
background-image: url(img/568dfdbdN4f7d7ca3.png);
background-repeat: no-repeat;
background-position: 0px -25px;
overflow: hidden;
}
<body>
<div></div>
<p></p>
</body> web

就是設置圖片顯示的高度，將超過部分的高度隱藏，還有設置圖片的顯示位置，來調整顯示那個小的icon；網站

如何生成CSS雪碧圖：http://spritegen.website-performance.org/url

1. CSS那些事兒
2. css雪碧圖
3. CSS雪碧圖
4. css 雪碧圖
5. css那些事兒（1）css簡寫
6. CSS Sprite雪碧圖
7. CSS雪碧拼圖
8. css Sprite雪碧圖
9. css sprite 雪碧圖
10. css sprites ----雪碧圖
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 常用的分佈式事務解決方案
• 再有人問你分佈式事務，把這篇扔給他

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。