脚本宝典收集整理的这篇文章主要介绍了background-position百分比原理详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
今天帮别人调代码时,看到一个样式:
background-posITion: 50% 0; background-size: 100% auto;
对background-Size:100% auto,意思是背景图片宽度为元素宽度*100%,高度等比缩放。详情可见css3 background。
对background-position很自然的以为百分比是根据父元素宽度计算的,但background-position真的不是,它有一套自己的原理。下面详细介绍。
在看各类教程时有以下等价写法:
那么为什么left,top就等价于0% 0%,right bottom等价于100% 100%呢?
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】:
背景图在容器中居中。
<style tyPE="text/css"> .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; } </style> <div class="wrap"> </div>
效果都是让背景图片居中
如上通过设置百分比和关键字能实现背景图居中,如果要实现通过具体值来设置图片居中该设置多少?
根据上面公式:
x=(容器的宽度-背景图宽度)*x百分比=(300px-200px)*50%=50px;
y=(容器的高度-背景图高度)*y百分比=(300px-200px)*50%=50px;
即设置background-postion:50px 50px;
测试一下:
<style type="text/css"> .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: 50px 50px; } </style> <div class="wrap"> </div>
效果同样居中。
到此这篇关于background-position百分比原理详解的文章就介绍到这了,更多相关background-position 百分比内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的background-position百分比原理详解全部内容,希望文章能够帮你解决background-position百分比原理详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。