web进阶之十五：关于背景的图片在元素中的位置
2018-09-11 本文已影响7人
甚得朕心
精确控制背景图片在元素中的位置
上篇我们可以把图片设置为元素的背景，而且也能让它铺满或者不铺满，那么我们同时也能将图片放到一个固定的位置。
需要通过background-position用来精确控制背景 图片在元素中的位置。
通过三种方式来确定图片在水平方向 和垂直方向的起点。
- 关键字：top right bottom left center
- 百分比
- 数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景与偏移量</title>
<style>
.box1{
width: 1072px;
height: 560px;
background-color: red;
margin: 0 auto;
background-image: url(img/002.jpg);
background-repeat: no-repeat;
/*可以通过数值来指定相对位置*/
background-position: 50px 50px;
/*通过关键字来设置方向*/
/*background-position: bottom right;*/
/*background-position: left;*/
/*通过设置页面的百分比来指定位置*/
/*background-position: 50% 50%;*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
注意写对图片的路径，不然图片无法显示。
背景图片的固定
通过背景图片的固定，我们也能实现犹如网站的购物车图标，不会随着屏幕的滚动而变化。在设置背景图片的时候，最好是设置在<body>内，这样不会因为其他元素的滚动而消失。
CSS Sprite
CSS Sprites是一种网页图片应用处理方式。
好处：
- 通过这种方式我们可以将网页中的零星图片集中放到一张大图上，这样只需要网页发送一次请求。
- 一次请求便可以同时加载多张图片，大大提高了图片的加载效率，提高了访问效率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
<style type="text/css">
/*如果我们在不同的状态时，传入三张图片，那么在点击时会闪烁，而且浏览器请求次数增加，每次都得传入图片，增加传输速度。*/
/*不写图片的位置的时候，就是传入了固定的位置
而且加载了三次，降低访问次数，增加流量。
*/
/*只写图片位置的时候，就是传入了一张整合过得图片
通过移动图片的位置来显示我们所需要的样子*/
.btn:link{
display: block;
width: 93px;
height: 29px;
background-image:url(img/btn.png);
background-repeat: no-repeat;
}
.btn:hover{
background-position: -93px 0px;
/*background-image: url(img/hover.png);*/
}
.btn:active{
background-position: -186px 0px;
/*background-image: url(img/active.png);*/
}
</style>
</head>
<body>
<a href='#' class="btn"></a>
</body>
</html>
上面代码中，要么写图片路径在hover 和 acitve中不写位移，那这就是传入三次图片，要么就是不写路径，通过传入一张整合以后的图片，来进行移动，实现我们想要看到的效果。提交加载速度。
