10.css精灵（Sprites）&滑动门&圆角及其扩展

最新推荐文章于 2022-09-28 17:28:15 发布

无足舞者

最新推荐文章于 2022-09-28 17:28:15 发布

阅读量500

点赞数 1

分类专栏：前端工程师【基础篇】文章标签： css spirites css精灵滑动门圆角及其扩展

本文链接：https://blog.csdn.net/u010567918/article/details/79266751

版权

前端工程师【基础篇】专栏收录该内容

14 篇文章 0 订阅

订阅专栏

滑动门与圆角

什么是滑动门 ?

1. 滑动门并不是一项全新的技术，它是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。

详解

难题

1. 假设需要实现下图中的菜单

分析

1. 难点1

a) 每个菜单的左上角和右上角都是圆弧型状的

2. 难点2

a) 每个菜单的长度都不相同

解决

三层嵌套

思路

1. 将一个菜单按钮看成3部分，用PS切出左边和右边圆角部分，以及中间1px宽。

2. 写3个div，利用背景图像的可层叠性，底层div背景用“中间1px”平铺，次层用左边圆角，最上层用右圆角。

3. 底层div负责菜单的宽，底层和次层div不需要指定高，由最上层指定高来撑起，菜单内容需要写在最上层div中。

代码

<!DOCTYPE html>

<html>

<head>

<style>

.btn{width:100px;background:url(bgc.jpg) repeat-x;} /* 底层指定宽 */

.btnL{background:url(bgL.jpg) no-repeat;} /* 次层指定左边圆弧，背景图片默认就置于左边 */

.btnR{background:url(bgR.jpg) no-repeat right 0;height:31px; /* 最上层指定右边圆弧和高 */

/* 下面是文字样式设置 */

text-align:center;color:#FFF;font-weight:bold;line-height:31px;} /* 最上层也指定文字 */

</style>

</head>

<body>

</div>

</body>

</html>

效果

PS裁切下来的素材

1. bgc.jpg

2. bgL.jpg

3. bgR.jpg

小结

1. 优点：这种三层嵌套方案，扩展性很高，菜单的宽度可以随意设置，只需要修改“底层div”的宽度即可。

2. 缺点：嵌套层次多了些，有点麻烦。

3. 案例重构：只需要新建一个空的html文件，再将上面的“代码”复制到此html文件中，最后将上面“PS裁切下来的素材”都另存到此html文件同级目录下，浏览器打开即可。

两层嵌套

思路

1. 将一个菜单按钮看成2部分，用PS从左边圆弧一直到中间偏右的某个位置整个裁切下来，然后再单独将右圆弧部分裁切下来。

2. div设置的宽度小于背景图宽度时，背景图片默认从左边显示多少是多少。

3. 写两层div，底层div用左部分，上层用右圆弧部分。

4. 底层（父级）div负责宽，上层（子级）div负责内容和高。

a) 子级div宽度如果不指定，则默认撑满父级宽。

b) 父级高度如果不指定，子级的高度默认撑开父级高度。

代码

<!DOCTYPE html>

<html>

<head>

<style>

.btnL{width:98px;background:url(bgL.png) no-repeat;} /*底层（父级）指定左大半部分和大部分宽 */

.btnR{background:url(bgR.png) no-repeat right 0;height:31px; /*上层（子级）指定右圆弧、高、文字 */

/* 下面是设置文字的样式 */

text-align:center;line-height:31px;font-weight:bold;color:#FFF;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

PS裁切下来的素材

1. bgL.png

2. bgR.png

小结

1. 优点：相对于“三层嵌套”少了一层div嵌套，并且少了一个样式代码。

2. 缺点：扩展性受到限制，对于对宽度扩展性要求大的地方有局限性。

a) 如：将上面代码中父级的宽度从98px改成100px后再运行效果如下：

b) 另外，如果图片太大的话客户端加载速度相对会较慢。

实战一（圆角菜单）

题目

1. 实现下图的菜单

答

第一步：分析

1. 整个导航栏可能扩展性要求很高，所以需要使用三层嵌套。

2. 而导航栏里面的单个菜单按钮对于扩展性要求不高，可以使用两层嵌套。

第二步：完成结构和样式重置

<!DOCTYPE html>

<html>

<head>

<title>滑动门实战</title>

<style>

body,ul{margin:0;font-family:微软雅黑}

ul{padding:0;list-style:none;}

a{text-decoration:none;}

</style>

</head>

<body>

<div class="nav"> 

<div class="navL"> 

<ul class="navR"> 

<li>

<a href="#"> 

<span>MiaoV</span> 

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

<span>加入MiaoV</span>

</a>

</li>

</ul>

</div>

</body>

</html>

第三步：完成代码

<!DOCTYPE html>

<html>

<head>

<title>滑动门实战</title>

<style>

body,ul{margin:0;font-family:"微软雅黑"}

ul{padding:0;list-style:none;}

a{text-decoration:none;}

body{background:#23232f;padding:50px;}

"中间1px平铺"就不需要了，因为用PS测量得到背景颜色是一个纯色，

不需要占用背景图片，直接指定背景颜色即可，一个元素可以同时拥

有背景图片和背景颜色，并且背景图片是盖在背景颜色上面的，这样

我们就可以将"次层"div中要设置的背景图片拿到"底层"div中了，

次层也就可以去掉不要了。另外，为了让内容撑开宽度，我们添加了浮动。

.nav{background:url(bgL.jpg) #0f0f14 no-repeat;float:left;}

.navR{background:url(bgR.jpg) no-repeat right 0;float:left;

padding:4px 4px 0 3px;}

.nav li{float:left;padding-left:1px;}

/* 要使a标签支持高度，所以需要加浮动 */

.nav a{background:url(bgL.png) no-repeat;float:left;}

.nav span{background:url(bgR.png) no-repeat right 0;float:left;

font-size:14px;height:31px; line-height:30px;color:#FFF;

/* 开发中一般不会为每一个菜单按钮单独设置宽度，而是用内边距padding撑开宽度 */

padding:0 18px;}

/* 群组鼠标移动hover效果和当前页效果*/

.nav a:hover,.nav .active{background:url(hoverL.jpg) no-repeat;}

.nav a:hover span,.nav .active span{background:url(hoverR.jpg) no-repeat right 0;}

</style>

</head>

<body>

<div class="nav"> 

 

<ul class="navR"> 

<li>

<a href="#"> 

<span>MiaoV</span> 

</a>

</li>

<li>

<a href="#" class="active"> 

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

</body>

</html>

第四步：效果

第五步：总结PS处理得到的素材

1. bgL.jpg （新PS技巧：Ctrl+T >单击鼠标右键 >选择水平翻转 >bgL.jpg可变bgR.jpg）

2. bgR.jpg

3. bgL.png

4. bgR.png

5. hoverL.jpg

6. hoverR.jpg

总结

1. 实战案例重现：新建一个空的html文档，将“第三步”中的代码全部复制到此html文件中，再将“第五步”中的素材全部另存到此html文件同级目录下，最后用浏览器打开此html文件即可。

实战二（宽高可扩展的圆角背景）

题目

1. 实现下图圆角内容栏

答

第一步：分析

第二步：完成结构

<!DOCTYPE html>

<html>

<head>

<title>滑动门实战</title>

<style>

</style>

</head>

<body>

<div class="boxHead">

<div class="boxHeadL">

<div class="boxHeadR"></div>

</div>

<div class="boxC">

页面内容<br/>

</div>

<div class="boxFoot">

<div class="boxFootL">

<div class="boxFootR"></div>

</div>

</div>

</body>

</html>

第三步：完成代码

<!DOCTYPE html>

<html>

<head>

<title>滑动门实战</title>

<style>

.box{width:200px;margin:30px auto;}

.boxHead{background:url(boxHead.jpg) repeat-x;}

.boxHeadL{background:url(boxHeadL.jpg) no-repeat;}

.boxHeadR{background:url(boxHeadR.jpg) no-repeat right 0;

height:9px;overflow:hidden;}/* "overflow:hidden;"兼容IE6最小19px高度 */

.boxFoot{background:url(boxFoot.jpg) repeat-x;}

.boxFootL{background:url(boxFootL.jpg) no-repeat;}

.boxFootR{background:url(boxFootR.jpg) no-repeat right 0;

height:9px;overflow:hidden;}/* "overflow:hidden;"兼容IE6最小19px高度 */

.boxC{border-left:1px solid #989898;border-right:1px solid #989898;}

</style>

</head>

<body>

</div>

页面内容<br/>

</div>

</div>

</body>

</html>

第四步：效果

第五步：总结PS处理得到的素材

1. boxHead.jpg

2. boxHeadL.jpg

3. boxHeadR.jpg

4. boxFoot.jpg

5. boxFootL.jpg

6. boxFootR.jpg

总结

实战三（背景透明的圆角）

题目

1. 题目的产生

a) 产生条件：我们为“实战二”的案例代码添加一个页面背景，添加的代码如下：

i. body{background:#000;}

b) 产生效果：代码添加后浏览器打开得到效果如下：

c) 小结

i. 当把白色背景换成了其他颜色后，可以看到在圆角处出现了问题。

答

方式一

第一步：分析

1. 将圆角边缘用PS处理成透明的

2. 将两个圆角分别放在底层块两头最外边。

第二步：编码

1. 代码

<!DOCTYPE html>

<html>

<head>

<title>滑动门实战</title>

<style>

body{background:red;}

/* "btn.gif"、 "btnL.gif"、btnR.gif" 都是透明的图片 */

.btn{background:url(btn.gif) repeat-x;width:200px;margin:30px auto;}

.btnL{background:url(btnL.gif) no-repeat;}

.btnR{background:url(btnR.gif) no-repeat right 0;height:31px}

</style>

</head>

<body>

</div>

</body>

</html>

2. 效果

第三步：将两个圆弧层用相对定位放到最两边

1. 代码

<!DOCTYPE html>

<html>

<head>

<title>滑动门实战</title>

<style>

body{background:red;}

/* "btn.gif"、 "btnL.gif"、btnR.gif" 都是透明的图片 */

.btn{background:url(btn.gif) repeat-x;width:200px;

margin:30px auto;}

.btnL{background:url(btnL.gif) no-repeat;

position:relative;left:-9px;}/* 相对定位 */

.btnR{background:url(btnR.gif) no-repeat right 0;

height:25px;

position:relative;left:18px;}/* 相对定位 */

</style>

</head>

<body>

</div>

</body>

</html>

第四步：效果

方式二（推荐）

第一步：分析

1. 将圆角边缘用PS处理成透明的。

2. 将滑动门三层的摆放顺序翻转过来，将原“底层”div放到最上层，然后给“底层”div指定左右外边距。

第二步：完成代码

<!DOCTYPE html>

<html>

<head>

<title>滑动门实战</title>

<style>

body{background:red;}

.btnL{background:url(btnL.gif) no-repeat;width:200px;}

.btnR{background:url(btnR.gif) no-repeat right 0;}

.btn{background:url(btn.gif) repeat-x;height:25px;

margin:0 9px;}/* 温习：父子级包含的时候，子级的margin-top会传递给父级 */

</style>

</head>

<body>

</div>

</body>

</html>

第三步：效果

PS素材

1. btn.gif

2. btnL.gif

3. btnR.gif

总结

1. 实际开发中推荐“方式二”。

2. 实战案例重现：新建一个空的html文件，将代码复制到此html文件中，再将“PS素材”里所有图片另存到此html文件的同级目录下，最后用浏览器打开即可。

实战四（CSS3自带圆角）[不需要用到滑动门]

代码

<!DOCTYPE html>

<html>

<head>

<style>

.box{width:200px;height:200px;border:1px solid #e5e5e5;margin:30px auto;

border-radius:40px;}

</style>

</head>

<body>

</body>

</html>

效果

总结

1. 虽然CSS3自带的圆角使用很方便，但各大浏览器兼容性不好（如：IE8以下浏览器都不支持）。

CSS Sprites (CSS精灵)

简介

1. CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的。

2. 加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

原理

1. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

优缺点

优点

1. 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2. CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

缺点

1. 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

2. CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！

3. CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

4. CSS Sprites非常值得学习和应用，特别是页面有一堆icon（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

用法

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..

#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

#ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

.nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚。

范例

范例一（入门）

第一步：为每一个div设置同一个背景图片

<!DOCTYPE html>

<html>

<head>

<title>CSS精灵</title>

<style>

/* 1.统一设置背景图片 */

div{width:80px;height:80px;background:url(bigptr.jpg) no-repeat;

border:10px solid black;margin:10px;float:left;display:inline;}

/* 添加 "display:inline" 是为了清掉IE6下的双边距bug */

温习 : 双边距bug产生条件

1. 块元素

2. 浮动

3. 横向的外边距margin

4. IE6下

解决办法 : 将块变为内嵌

</style>

</head>

<body>

</body>

</html>

第二步：运行效果

第三步：使用CSS 精灵

<!DOCTYPE html>

<html>

<head>

<title>CSS精灵</title>

<style>

/* 1.统一设置背景图片 */

div{width:80px;height:80px;background:url(bigptr.jpg) no-repeat;

border:10px solid black;margin:10px;float:left;display:inline;}

/* 添加 "display:inline" 是为了清掉IE6下的双边距bug */

温习 : 双边距bug产生条件

1. 块元素

2. 浮动

3. 横向的外边距margin

4. IE6下

解决办法 : 将块变为内嵌

/* 2.为元素逐一定义背景坐标 */

.box1{background-position:-145px -65px;}

.box2{background-position:-98px -162px;}

.box3{background-position:-235px -116px;}

</style>

</head>

<body>

</body>

</html>

第四步：再运行效果

素材

1. bigptr.jpg

总结

1. 范例重现：新建一个空的html文件，将上面的代码复制到此html文件中，再将图片右键另存到此html文件的同级目录下，最后浏览器打开运行即可。

范例二（实战）

题目

1. 将上面“滑动门与圆角”中的“实战二”用CSS精灵进行优化。

答

第一步：PS合并图标

1. boxAll.jpg

第二步：完成代码优化

<!DOCTYPE html>

<html>

<head>

<title>CSS精灵</title>

<style>

.box{width:200px;margin:30px auto;}

.boxHead,.boxHeadL,.boxHeadR,.boxFoot,.boxFootL,.boxFootR{

background:url(boxAll.jpg) no-repeat;}

.boxHead,.boxFoot{background-repeat:repeat-x;}

/* ".boxHead"坐标不需要指定，因为默认值为： 0 0 或left top , 刚好是需要的位置 */

.boxHeadL{background-position:0 -9px;}

.boxHeadR{background-position:right -18px;

height:9px;overflow:hidden;} /* "overflow:hidden;"兼容IE6最小19px高度 */

.boxFoot{background-position:0 -27px;}

.boxFootL{background-position:0 -36px;}

.boxFootR{background-position:right -45px; /* "right"表示背景图的右侧与元素的右侧对齐 */

height:9px;overflow:hidden;} /* "overflow:hidden;"兼容IE6最小19px高度 */

.boxC{border-left:1px solid #989898;border-right:1px solid #989898;}

</style>

</head>

<body>

</div>

页面内容<br/>

</div>

</div>

</body>

</html>

第三步：效果

总结

1. 没什么好说的，这里就加强一下“background-position”的关键字取值的理解：

a) “background-position：left top”

i. 背景图的左侧跟元素的左侧对齐，背景图的顶部跟元素的顶部对齐。

b) “background-position：cneter center”

i. 背景图中间与元素中间对齐。

c) “background-position：right top”

i. 背景图右上角与元素右上角对齐。

无足舞者

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

10.css精灵（Sprites）&滑动门&圆角及其扩展

滑动门与圆角

什么是滑动门 ?

详解

难题

分析

解决

三层嵌套

思路

代码

效果

PS裁切下来的素材

小结

两层嵌套

思路

代码

效果

PS裁切下来的素材

小结

实战一（圆角菜单）

题目

答

第一步：分析

第二步：完成 结构 和 样式重置

第三步：完成代码

第四步：效果

第五步：总结PS处理得到的素材

总结

实战二（宽高可扩展的圆角背景）

题目

答

第一步：分析

第二步：完成 结构

第三步：完成代码

第四步：效果

第五步：总结PS处理得到的素材

总结

实战三（背景透明的圆角）

题目

答

方式一

第一步：分析

第二步：编码

第三步：将两个圆弧层用相对定位放到最两边

第四步：效果

方式二（推荐）

第一步：分析

第二步：完成代码

第三步：效果

PS素材

总结

实战四（CSS3自带圆角）[不需要用到滑动门]

代码

效果

总结

CSS Sprites (CSS精灵)

简介

原理

优缺点

优点

缺点

用法

范例

范例一（入门）

第一步：为每一个div设置同一个背景图片

第二步：运行效果

第三步：使用CSS 精灵

第四步：再运行效果

素材

总结

范例二（实战）

题目

答

第一步：PS合并图标

第二步：完成代码优化

第三步：效果

总结

第二步：完成结构和样式重置

第二步：完成结构