码迷,mamicode.com
首页 > Web开发 > 详细

css背景图片定位练习(二): background-position的百分比

时间:2016-04-14 13:44:21      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

background-position:x y;

百分比定位并不能直观的看出来,需要通过计算。

background-position百分比计算公式:

(容器宽度—背景图片的宽度)*x%=xpx
(容器高度—背景图片的高度)*y%=ypx

 

上节我们使用的图片也可以继续拿来做练习:

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景定位练习</title>
    
</head>
<body>
<style rel="stylesheet" type="text/css">
.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9 {
float: left;
width:100px;
height: 100px;
background: #666 url(18.png) no-repeat;
margin-left: 10px;
}


/*
(100px-400px)*x%=-300px; 那么x=100
(100px-400px)*y%=0; 那么y=0
*/
.box1{background-position:100% 0%}



/*
(100px-400px)*x%=-200px; 那么x=66.6666
(100px-400px)*y%=0; 那么y=0
*/
.box2{background-position:66.6666% 0%}


/*
(100px-400px)*x%=-100px; 那么x=33.3333
(100px-400px)*y%=0; 那么y=0
*/
.box3{background-position:33.3333% 0%}



/*
(100px-400px)*x%=0px; 那么x=0
(100px-400px)*y%=0px; 那么y=0
*/
.box4{background-position:0% 0%}



/*
(100px-400px)*x%=0px; 那么x=0
(100px-400px)*y%=-100px; 那么y=33.3333
*/
.box5{background-position:0% 33.3333%}


/*
(100px-400px)*x%=0px; 那么x=0
(100px-400px)*y%=-200px; 那么y=66.66
*/
.box6{background-position:0% 66.6666%}


/*
(100px-400px)*x%=0px; 那么x=0
(100px-400px)*y%=-300px; 那么y=100
*/
.box7{background-position:0% 100%}


/*
(100px-400px)*x%=-300px; 那么x=100
(100px-400px)*y%=-200px; 那么y=100
*/
.box8{background-position:100% 66.6666%}



/*
(100px-400px)*x%=-300px; 那么x=100
(100px-400px)*y%=-300px; 那么y=100
*/
.box9{background-position:100% 100%}

    </style>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
    <div class="box9"></div>

</body>
</html>

预览效果:

技术分享

 

 

因此不难得出background-position的等价写法:

left top,top left ,0 0等价于 0% 0%

center center 等价于 50% 50%

bottom right,right bottom 等价于 100% 100%

center right,right center 等价于 100% 50%

bottom center, center bottom 等价于 50% 100%

left center,center left 等价于 0% 50%

bottom left,left bottom 等价于 0% 100%

......

 

css背景图片定位练习(二): background-position的百分比

标签:

原文地址:http://www.cnblogs.com/tinyphp/p/5390228.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!