background-position: 50% 0;background-size: 100% auto；
对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详情可见css3 background。
对background-position很自然的以为百分比是根据父元素宽度计算的，但background-position真的不是，它有一套自己的原理。下面详细介绍。
一、等价写法在看各类教程时有以下等价写法：
top left, left top 等价于 0% 0%. top, top center, center top 等价于 50% 0%. right top, top right 等价于 100% 0%. left, left center, center left 等价于 0% 50%. center, center center 等价于 50% 50%. right, right center, center right 等价于 100% 50%. bottom left, left bottom 等价于 0% 100%. bottom, bottom center, center bottom 等价于 50% 100%. bottom right, right bottom 等价于 100% 100%.那么为什么left,top就等价于0% 0%，right bottom等价于100% 100%呢？
二、background-position百分比计算公式
background-postion:x y;x：{容器(container)的宽度?背景图片的宽度}*x百分比，超出的部分隐藏。y：{容器(container)的高度?背景图片的高度}*y百分比，超出的部分隐藏。 有了这个公式，就很容易理解百分百写法了，推算一下也就很容易理解上面各类等价写法了。
三、举例1、background-position:center center等价于background-position:50% 50%等价于background-position:?px ?px
例子中用到背景图如下【尺寸：200px*200px】：
背景图在容器中居中。
.wrap{ width: 300px; height: 300px; border:1px solid green; background-image: url(img/image.png); background-repeat: no-repeat;/* background-position: 50% 50%;*/ background-position: center center;}
查看更多关于background-position百分比原理_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108492