background填充百分比,backgroundposition属性书写

　　今天调别人代码的时候看到一个风格：

　　背景-位置：50% 0；背景尺寸：100%自动；对于background-size:100% auto，这意味着背景图片的宽度是元素宽度*100%，高度按比例缩放。详见css3背景。

　　background-position认为百分比是根据父元素的宽度计算的，这很自然，但background-position实际上不是这样。它有自己的原则。下面详细描述。

一、等价写法

　　阅读各种教程时有以下等价的写法：

　　左上，左上相当于0% 0%。顶，顶中心，中心顶相当于50% 0%。右上，右上相当于100% 0%。左，左中，中相当于0% 50%。中心，中心中心相当于50% 50%。右，右居中，居中右相当于100% 50%。左下，左下等于0% 100%。底部、底部中心、中心底部等于50% 100%。右下，右下等于100% 100%。那么为什么左，上等于0% 0%，右下等于100% 100%呢？

二、background-position百分比计算公式

　　背景位置：x y；x:{容器宽度—背景图片宽度}*x百分比，超出部分隐藏。y:{容器的高度—背景图片的高度}*y百分比，超出的部分隐藏。有了这个公式，100%的写法就很容易理解了，通过计算也很容易理解上面的各种等价写法。

三、举例

　　 1、背景-位置：中心中心相当于背景-位置：50% 50%相当于背景-位置：px？像素

　　示例中使用的背景图像如下[size: 200px*200px]:

　　背景在容器中居中。

　　style type=text/css 。wrap { width:300 px；高度：300px边框：1px纯绿；背景-图片：URL(img/image . png)；背景-重复：不重复；/*背景-职位：50% 50%；*/背景-位置：中心居中；}/stylediv class=wrap/div效果是将背景图片居中。

　　通过如上设置百分比和关键字，背景图像可以居中。如果要通过特定值来设置图像中心，应该设置多少？

　　根据上面公式：

　　X=(容器宽度-背景图片宽度)*x百分比=(300 px-200 px)* 50%=50px；

　　Y=(容器高度-背景图片高度)*y百分比=(300 px-200 px)* 50%=50px；

　　即设置背景位置：50px 50px 50px

　　测试它：

　　style type=text/css 。wrap { width:300 px；高度：300px边框：1px纯绿；背景-图片：URL(img/image . png)；背景-重复：不重复；/*背景-职位：50% 50%；*//*背景-位置：中心居中；*/背景-位置：50px 50px}/stylediv class=wrap/div效果也居中。

　　关于背景-职位百分比的原则，本文到此为止。有关背景职位百分比的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。