css背景图片定位练习(二): background-position的百分比
2016-04-14 11:57
806 查看
background-position:x y;
百分比定位并不能直观的看出来,需要通过计算。
background-position百分比计算公式:
(容器宽度—背景图片的宽度)*x%=xpx
(容器高度—背景图片的高度)*y%=ypx
上节我们使用的图片也可以继续拿来做练习:
预览效果:
因此不难得出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%
......
百分比定位并不能直观的看出来,需要通过计算。
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%
......
相关文章推荐
- 设置字体垂直居中
- 不同样式的计数
- DIV+CSS中图片和文字居中问题解决方案
- 图片大小固定的html+css图片提交按钮代码
- chrome js 获取css
- css背景图片定位练习(一)
- HTML&CSS——text-indent:2em详解
- ***HTML +CSS 总结与归纳
- CSS中关于多个class样式设置的不同写法
- Toolbar上overflow的样式自定义详解
- CSS3的calc()使用
- W3CHTML的所有样式解析
- CSS 中ie6兼容问题
- css 时间线 面包屑 进度条
- css控制UL LI 的样式详解
- 关于css
- css——多行文字固定高度垂直居中(ie6.7.8.9 chrome ff)
- CSS3选择器总结
- 你不知道的CSS(边框塌陷)
- CSS中的绝对定位与相对定位