前端背景图放置_CSS3背景图片百分比及应用

清疚 2022-12-31 14:22 146阅读 0赞

今天帮别人调代码时，看到一个样式：

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%呢？

百分比计算公式

任何CSS属性值为percent时，都需要根据某个参考值进行计算，搞明白这个参考值是什么，理解就容易多了。

标准规定：background-position:perenct的参考值为: (容器宽度 - 背景图片宽度).

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】：

![Image 1][]

背景图在容器中居中。

.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;

效果都是让背景图片居中

![Image 1][]

如上通过设置百分比和关键字能实现背景图居中，如果要实现通过具体值来设置图片居中该设置多少？

根据上面公式：

x=(容器的宽度-背景图宽度)\*x百分比=(300px-200px)\*50%=50px;

y=(容器的高度-背景图高度)\*y百分比=(300px-200px)\*50%=50px;

即设置background-postion:50px 50px;

测试一下：

.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;

效果同样居中。

推算百分比：

从上面看出来，百分比为background-position-x的值 = (背景在雪碧中的左边宽度)/(容器宽度 - 背景图片宽度)\*100%。

平常使用 background-position，一般是用固定值，比如：

.hello \{

background-position: 50px 50px; // 背景图片左上角离包含块左上角距离为水平方向 50px，竖直方向 50px

那如果上面的固定值 50px，我坚持要写成百分比如何？

已知背景图片大小为 150×150，包含块大小为 200×200。

答案是：

.hello \{

background-position:100% 100%;

这个值是这样计算的：

50/(200-150)\*100% = 100%

这是因为 background-position 在使用百分比时，概念跟固定取值并不一样。

举上面的示例说，如果设置 background-postion:10% 30%;，则是背景图片水平方向 10% 位置的点与包含块水平方向 10% 位置的点重合。换算成固定取值的话：

(200-50)\*10% = 5

示意如下：

但如果我们使用负的百分比，则浏览器的处理方式又跟绝对值一样了，比如：

.test \{

background-position:-10%, -50%;

就是让背景图片起点定位到包含块 (-10%, -50%) 的位置。

这个概念不十分直观，所以没细究的话，很容易误解。

在REM中的应用

在使用自适应时，由于数字的误差导致了背景图片会出现定位出现一些小偏差问题，如果可以将背景图片通过百分比来定位，而不是默认的rem来定位，可能精准度更高点。

![Image 1][]

以上这个是一个百度分享的示例，假如需要做这种自适应，其实只要稍微分开些，使用rem也没什么多大差别，但相对来说使用百分比可能准度更高。

HTML代码：

分享到

新浪微博

腾讯微博

QQ空间

微信

CSS代码：

.m-shareBox .bdshare\_t a:before\{display:block; content:""; background:url(img/bdshare.png) no-repeat; background-size:cover; width:.72rem; height:.72rem; margin:0 auto .11rem;\}

.m-shareBox .bdshare\_t .bds\_tsina:before\{background-position:center 0;\}

.m-shareBox .bdshare\_t .bds\_tqq:before\{background-position:center 25%;\}

.m-shareBox .bdshare\_t .bds\_qzone:before\{background-position:center 50%;\}

.m-shareBox .bdshare\_t .bds\_weixin:before\{background-position:center 75%;\}

演示：http://caibaojian.com/demo/2016/6/share.html(缩放你的浏览器)

也许直接使用REM定位背景更为直接和可扩展了。但别忘了，要设置你的background-size为cover或者auto 100%。使其背景跟随内容缩放。

参考文章：

PS，你可能还注意到上面的分享左右两边跟中间不是一个宽度，那是因为我代码没有写好，恰好在结一最近有提到这个问题的解决之道。我做了一下，发现无法适合上面这种多个间距的，只适合三个的。下一篇再探讨这个问题。

[Image 1]:

前端背景图放置_CSS3背景图片百分比及应用

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS3 背景

相关背景图片固定（背景图片附着）（HTML、CSS）

相关背景图片css

相关 CSS3-背景原点、背景裁剪

相关前端背景图放置_前端开发关于网页背景图片的缩放自适应及组合形成背景图的问题...

相关前端背景图放置_CSS3背景图片百分比及应用

相关 android 三角形背景图,CSS3 三角形渐变背景图

相关 HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转

相关【CSS3】背景

相关【前端】CSS 背景图片缩放