css精灵、图片整合、纹理放置案例教程

terry 2年前 (2023-09-27) 阅读数 55 #数据结构与算法

1、什么是css精灵

CSS精灵通常被称为css精灵，有些地图整合和CSS图像放置也被翻译为CSS精灵人们称之为精灵图。它是一种定期将导航和按钮背景图像合并为单个背景图像的技术，即将多个图像合并为一个完整图像，然后使用背景位置来定位背景图像。

2。为什么需要 CSS 精灵？

CSS Sprites 并不是一项新技术。目前已经相当成熟。 CSS Sprites在阿里巴巴、百度、谷歌等公司的网站上随处可见。阴影。是网页上处理图像应用的常用方法。它允许您将页面上包含的所有分散图像整合为一张大图像。这样，当您访问该页面时，加载图像就不会像以前一样缓慢地一张一张地出现。对于当今流行的网络速度来说，单张不超过200kb的图片所需的加载时间本质上是相同的，节省加载速度的关键不是减重，而是减少数量，因为计算机是以字节来计数的。每次在页面上显示图像时，都会向服务器发送请求。因此图像越多，请求的次数就越多。为了减少 HTTP 请求次数，很多网站不使用导航背景图片、登录框、按钮背景图片等。

导航栏图标、登录框图片等。很多网站不使用标签，而是使用标签。 CSS 雪碧图。本课程分析CSS Sprite的实现原理，详细讲解制作方法并实现完整效果，让您快速掌握CSS Sprite技术。

3. CSS Sprites 的优点

在很多情况下都有一定的优势。最重要的是，它可以减少服务器负载，提高网站加载速度。

因为如果我们现在有 9 个小图，（例 1）那么就会有 9 个 HTTP 请求，但是如果你把这 9 个小图放到一个大图里，你就只需要请求一次，因为需要 9 个小图都在一张大图片中。一次性请求后，不再需要重新发送HTTP请求来请求图像资源。

示例 1.

页面加载时，不是加载每个单独的图像，而是立即加载整个组合图像。它显着减少了HTTP请求次数，减轻了服务器的压力，同时也减少了光标放置时加载图像所需的时间延迟，使效果更加流畅。

随着页面设计向精致化和独创性发展，我开始考虑使用非JS方法来创建悬停和悬停菜单效果。雪碧图就是在这个时候创建的。

先看一下效果：

先在普通模式下滚动：

然后鼠标悬停时滚动：

最后在鼠标点击链接时滚动：很自然。具体使用的图片如下：

其实，现在鼠标悬停点击链接时的图片切换是通过位置控制取自bg2_btn.jpg。具体实现方法如下：

一、html页面源码：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>nav</title> 
<link href="mydemo.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div> 
    <img  alt="wenqi's blog" /> 
</div> 
<!------- 导航2 -------> 
<div class="menu2"> 
    <div class="left2"></div> 
    <div class="center2"> 
        <a href="#">Blog</a> 
        <a href="#">Themes</a> 
        <a href="#">Service</a> 
        <a href="#">About</a> 
        <a href="#">Help</a>  
    </div> 
    <div class="right2"></div> 
    <div class="clear"></div> 
</div> 
</body> 
</html> 

其次就是css的代码： 

代码如下:

html 
{ 
width:100%; 
height:100%; 
} 
body 
{ 
background-color:#fff; 
font-size:18px; 
font-family:"Arial","Tahoma","微软雅黑","雅黑"; 
line-height:18px; 
padding:0px; 
margin:0px; 
text-align:center; 
} 
/* www.codefans.net */ 
a 
{ 
display:block; 
float:left; 
} 
del,div.clear 
{ 
height:0px; 
font-size:0px; 
line-height:0px; 
padding:0px; 
margin:0px; 
display:block; 
clear:both; 
overflow:hidden; 
} 
div 
{ 
width:550px; 
text-align:left; 
margin:auto auto auto auto; 
} 
.menu2 
{ 
font-size:14px; 
line-height:14px; 
margin-bottom:24px; 
} 
.menu2 .left2 
{ 
width:5px; 
height:47px; 
background:url("image/navigation/bg2_left.jpg") no-repeat left top; 
float:left; 
} 
.menu2 .center2 
{ 
width:540px; 
height:47px; 
background:url("image/navigation/bg2_center.jpg") repeat-x left top; 
float:left; 
} 
.menu2 .right2 
{ 
width:5px; 
height:47px; 
background:url("image/navigation/bg2_right.jpg") no-repeat left top; 
float:left; 
} 
.menu2 a:link,.menu2 a:visited 
{ 
color:#585858; 
width:77px; 
height:30px; 
padding-top:17px; 
background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; 
text-align:center; 
text-decoration:none; 
} 
.menu2 a:hover 
{ 
color:#fff; 
background-position:left 0px; 
} 
.menu2 a:active 
{ 
color:#fff; 
background-position:left -47px; 
}

其实这一段是主要的：

代码如下：

.menu2 a:link,.menu2 a:visited 
{ 
color:#585858; 
width:77px; 
height:30px; 
padding-top:17px; 
background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; 
text-align:center; 
text-decoration:none; 
}

利用图像积分图，精确的图像切割并利用背景位置进行控制，可以达到控制效果。

要创造这种效果，您还需要学习如何将小图像排列成大图像，以便更容易测量位置而不互相影响。？同一列中，计算缩略图显示位置时，只需要知道第一个小图标的位置即可。对于同一列的缩略图，X坐标是相同的，只需要改变Y坐标的位置即可，这样就方便多了。使用的CSS属性是background-image、background-position和background-repeat。或者简单地使用复合背景属性来编写它们。

使用CSS Sprites可以大大减少网页的http请求，从而大大提高页面性能。这是CSS Sprites的最大优点，也是它被广泛传播和使用的主要原因；就我个人而言，我认为 CSS Sprites 可以减少图像字节。我多次比较了将 3 个图像合并为 1 个图像的字节数，并且字节总是小于 3 个图像的字节总和。

4。 CSS sprites 示例教程

1。材料和要达到的效果

2。 Sprites 示例解释和介绍

首先使用 ps 将这些材质图标放置在同一张图像上，然后实现为列表类布局。使用css sprite来实现这个布局，然后用背景样式来实现。

为了组织这个导航，我们使用无序的街道列表。每个里站写成一行。我们在ul上设置padding，以达到周围内容与边框之间一定的间距效果。因为每个li前面的图标都不同，但是图片中合并了背景图，所以这里我们就开始在li中使用SPAN标签来实现不同图标的效果。每个列表项的图标都不同。为了区分，对范围设置了不同的类名，并为不同的类设置并放置了相应的图标。

3。教程准备示例 1) 图标素材。这里，我们直接为您提供了一个名为“bg.png”的链接素材图片，如下图，可以直接保存为保存使用。

4。先写好布局，然后用css精灵设置不同的背景图标样式

html代码：

<ul class="Sprite"> 
    <li><span class="a1"></span><a href="#">我的主页</a></li> 
    <li><span class="a2"></span><a href="#">新闻头条</a></li> 
    <li><span class="a3"></span><a href="#">电视剧</a></li> 
    <li><span class="a4"></span><a href="#">最新电影</a></li> 
    <li><span class="a5"></span><a href="#">小说大全</a></li> 
    <li><span class="a6"></span><a href="#">旅游度假</a></li> 

</ul>

在不同的span标签中添加不同的类名，以区分不同的效果。

css代码：

ul { margin:0 auto;border:1px solid #F00;width:300px; padding:10px;} 
ul li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden; float:left;} 
ul li span{ float:left; width:17px;padding-top:5px;height:17px;  
overflow:hidden;background:url(bg.png) no-repeat} 
ul li a{ padding-left:5px}

css sprite代码及说明

先放一张背景图 ul.Sprites li span{background:url(bg.png) no-repeat} 设置span的背景图。然后为不同的范围类设置图标背景位置 ul li .a1{background-position: -62px -32px} 的具体值。将背景图片设置为对应盒子对象的背景，然后向左“移动”62像素，向上“移动”32像素开始显示。这个background-icon ul li .a2{background-position: -86px -32px}将background-image设置为对应盒子对象的背景，然后向左“平移”86个像素，向上“移动”32个像素，使背景上的此图标开始显示 ul li .a3{ background-position: -110px -32px } 将背景图片设置为相应框对象的背景，然后向左“移动”110px，向上“移动”32px，开始显示此图标背景 ul li . a4{background-position: -133px -32px} 设置background-image作为对应盒子对象的背景向左“移动”133px，向上“移动”32px开始显示这个背景图标 ul li .a5{background-position: - 158px -32px} 设置背景图片为对应盒子对象的背景并向左“移动”158px，向上“移动”32px开始显示这个背景图标

要点：属性background-position有两个值，第一个值代表水平方向位置值（可以为正值或负值），第二个值A代表垂直方向（可以为正值或负值）。如果是正数，则代表该位置的左侧和顶部位置背景图像，当图像为背景时，用作对象的边框。如果为负数，则表示背景图像为边框。对象的背景图像，超出边框左侧多远为背景图像，以及超出框架顶部多远就是显示的背景图片