background属性、雪碧图
2018-10-23 本文已影响0人
时光清浅_许你心安_
属性解释
- background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
雪碧图
雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。
1、相比多个图片，占用空间小。
2、浏览器图片请求次数减少
- 步骤：
1、使用Photoshop新建一张背景透明的图片
2、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小调整大小
3、按照所有小图片的范围裁剪图片，存为透明背景的png图片
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>亚马逊</title>
<style type="text/css">
.box:link{
display:block;
width:48px;
height:27px;
background-image:url(yamaxun.png);
background-repeat:no-repeat;
background-position:0px -338px;
}
.box:hover{
background-position:-49px -338px;
}
.box:active{
background-position:-120px -338px;
}
</style>
</head>
<body>
<a href="#" class="box"></a>
</body>
</html>
image.png
