css background-position 图片整合技术

最新推荐文章于 2023-11-24 01:15:00 发布

疯狂的小虫

最新推荐文章于 2023-11-24 01:15:00 发布

阅读量1.6k

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/GOD_CHONG/article/details/50580786

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

当网页中存在多个小图片比如logo ，菜单图片，导航图片等，如果每次都是从服务请求，或者图片链接在另一个地址那么不进页面的加载速度会很慢，而且也会很消耗流量，

那么就需要下面的技术了：

一.图片整合

图片整合技术(CSSSprites):将导航背景图片，图片按钮背景图片等有规则的合并为一张背景图，即多张图片合为一整张图，然后用background-position来实现背景图的定位技术。

优势：通过中等和图片，减少对服务器的请求数量，从而加快页面的加载速度。9张图片——9次——36K，一张——1次——4k。

二.滑动门技术

1.滑动门技术特征

可以使CSS设计出来的导航菜单兼具传统布局的图像效果与CSS布局的高效扩展性。

2.什么是滑动门

滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊的动态效果。

图片：

效果图：

代码例子：

<html>
<head>
<meta charset="utf-8">
<title>滑动</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,ol,dl{list-style:none;}
a{text-decoration:none;}

.nav{width:680px;height:42px;margin:50px auto;}
.nav li{float:left;margin-right:10px;}
.nav li a{display:block;height:42px;background:url(img1.jpg) no-repeat right top;}
.nav li a span{display:block;height:42px;padding:0 10px;line-height:42px;background:url(img2.jpg) no-repeat;color:#fff;}

.nav li a:hover{background-position:right -42px;}
.nav li a:hover span{background-position:left -42px;}

</style>
</head>

<body>

<ul class="nav">
	<li><a href="#"><span>首页</span></a></li>
    <li><a href="#"><span>首页首页首页首页首页首页</span></a></li>
    <li><a href="#"><span>首首页首页页</span></a></li>
    <li><a href="#"><span>首首页首页页</span></a></li>
    <li><a href="#"><span>首首页首页页</span></a></li>
</ul>



</body>
</html>