CSS3背景图片百分比及应用

今天帮别人调代码时,看到一个样式:

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

301701448211894

背景图在容器中居中。

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

效果都是让背景图片居中

301705221032747

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

根据上面公式:

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-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来定位,可能精准度更高点。

share

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

HTML代码:

	<div class="m-shareBox" id="Jbdshare_wrap">
		<p class="p_tit">分享到</p>
		<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
			<a class="bds_tsina" title="分享到新浪微博" href="#">新浪微博</a>
			<a class="bds_tqq" title="分享到腾讯微博" href="#">腾讯微博</a>
			<a class="bds_qzone" title="分享到QQ空间" href="#">QQ空间</a>
			<a class="bds_weixin" title="分享到微信" href="#">微信</a>
		</div>
	</div>

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%;}

演示:https://qdkfweb.cn/demo/2016/6/share.html(缩放你的浏览器)

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

参考文章:

background-position百分比原理

background-position 的百分比

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流