css sprites_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

css sprites_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:25 AM

css sprites是什么呢？

简而言之，它就是将网页中的许多小图片，按照约定好的规则，将这些小图片绘制到一张大图片上，然后利用background中的background-position将需要的图片，扣出来。

可能你会问，这样做是为什么？

其实就是减少http请求，提高网站性能。其实因为每一张图片去服务端下载，都需要一次完整的HTTP请求，当许多图片同时下载时，那么就会发出相应数量的http请求，然而，不同的浏览器处理图片下载的数量是有限制的，一般在1-10范围中，所以，倘若你网站中的图片很多，那么不管你网速有多快，其势必影响网站性能。这就是为什么需要css sprites技术。

好了，我们来一起写个demo，举个例子看看。

倘若我要实现一个控制按钮器，如下图所示：

每当我鼠标移到图中的每个控制器按钮时，都会触发一个事件，让其变成红色区域，那么可见，每个按钮都是独立且有功能的，你可能会将每个区域都设置成一个张小图片。

但，那得向后台请求多少次呢！！！

优化网站性能的其中之一，就是减少http请求。

所以这里需要图片合并减少http请求，我们就用上了css sprites了。

首先，我们按照一定的规律，将需要的所有小图片合并成一张大图，制作出我们需要的图片。

下图为鼠标未移到每个按钮上时的状态：

下图为鼠标移到每个按钮时的状态：

然后，我们再将每个按钮区域的大小设置为宽31px,高29px以及背景图片定义为正常情况下的图片，及上述图一。

你可能会问，为什么是宽31高29？

因为每张小图片，即每个按钮的宽高是这么多嘛。

接下来，我们就利用background-position属性来将我们需要的部分图片，扣下来，如我需要，那么我就将background-position设置为0 0，就ok了。

最后，当鼠标移到相应按钮时，其变成浅红色状态的图案时，也是如此，利用 background加载大图，background-position扣下需要的小图片。

实现后的详细代码，见下

<!DOCTYPE html>    <head>        <title>js_test</title>        <style type="text/css">            .ptz {                width:31px;                height:29px;                margin-right:1px;                margin-bottom:6px;                cursor:pointer;                float:left;                background:url(ptz.gif) no-repeat;            }            .tmain, .mmain, .bmain {                clear:left;            }            .tl {                background-position:0 0;             }            .tm {                background-position:-34px 0;             }            .tr {                background-position:-68px 0;             }            .add {                background-position:-102px 0;             }            .search {                background-position:-136px 0;             }            .subtract {                background-position:-170px 0;            }            .ml {                background-position:0 -32px;            }            .mm {                background-position:-34px -32px;                }            .mr {                background-position:-68px -32px;             }            .focus {                background-position:-136px -32px;             }            .bl {                background-position:0 -64px;            }            .bm {                background-position:-34px -64px;            }            .br {                background-position:-68px -64px;            }            .iris {                background-position:-136px -64px;            }            .slide {                width:192px;                height:18px;                clear:left;                background-position:0 -96px;            }            .slideBtt {                width:14px;                height:16px;                margin-left:22px;                background-position:0 -121px;            }            .indicate {                clear:left;                width:189px;                height:29px;                border:1px solid #C1C0C0;                 border-radius:3px;            }            .outterBtt {                float:left;                border-right:1px solid #C1C0C0;                width:37px;                height:100%;            }            .lastOut {                border:0;            }            .btt1 {                width:14px;                height:14px;                margin:8px 0 0 12px;                background-position:-28px -127px;            }            .btt2 {                width:20px;                height:20px;                background-position:-57px -127px;                margin:7px 0 0 11px;            }            .btt3 {                width:12px;                height:16px;                background-position:-90px -128px;                margin:8px 0 0 10px;            }            .btt4 {                width:20px;                height:18px;                background-position:-118px -128px;                margin:9px 0 0 9px;            }            .btt5 {                width:15px;                height:15px;                background-position:-152px -128px;                margin:8px 0 0 12px;            }            .tmain div:hover,             .mmain div:hover,             .bmain div:hover,             .outterBtt div:hover {                background-image:url(ptzon.gif);              }                    </style>    </head>    <body>                <div class="tmain">            <div class="ptz tl"></div>             <div class="ptz tm"></div>              <div class="ptz tr"></div>              <div class="ptz add"></div>             <div class="ptz search"></div>            <div class="ptz subtract"></div>        </div>                <div class="mmain">            <div class="ptz ml"></div>            <div class="ptz mm"></div>              <div class="ptz mr"></div>              <div class="ptz add"></div>             <div class="ptz focus"></div>            <div class="ptz subtract"></div>        </div>                <div class="bmain">            <div class="ptz bl"></div>            <div class="ptz bm"></div>              <div class="ptz br"></div>              <div class="ptz add"></div>             <div class="ptz iris"></div>            <div class="ptz subtract"></div>        </div>                <div class="ptz slide">            <div class="ptz slideBtt"></div>        </div>                <div class="indicate">            <div class="outterBtt">                <div class="ptz btt1"></div>            </div>            <div class="outterBtt">                <div class="ptz btt2"></div>            </div>            <div class="outterBtt">                <div class="ptz btt3"></div>            </div>            <div class="outterBtt">                <div class="ptz btt4"></div>            </div>            <div class="outterBtt lastOut">                <div class="ptz btt5"></div>            </div>        </div>    </body></html>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。