css sprites_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

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으로 문의하세요.