码迷,mamicode.com
首页 > 其他好文 > 详细

background-position还可以这样用

时间:2016-02-02 17:51:57      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

文章同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401626453&idx=1&sn=6af07474df847d251358c4b453eaddfd#wechat_redirect

感兴趣的可以扫码关注哈:

技术分享

background-position这个样式规则,切页面的同学应该都用过。关于其详细介绍,就不再赘述了。http://www.cnblogs.com/huazaizai/archive/2010/11/03/1867907.html这篇博客已经把background-position相关知识点描述的很详细了。

当我们把backgrund-position的值设置为百分数的时候,那么背景图的位置是怎么计算的呢?当我们指定background-position:50% 50%的时候,实际上效果等同于backgrund-position:center center。它的计算规则为:

x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。

y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

为了清楚的表示这一点,下面举了两个栗子。

首先有这么一张图片它的宽高为:510*382

技术分享

然后请看下面这段代码:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.wrapper {

width: 300px;

height: 300px;

border: 2px solid red;

background-image: none;

}

</style>

</head>

 

<body>

<div class="wrapper"></div>

</body>

</html>

它的实际效果为

技术分享

这正如期望的效果那样。当我们设置background-position:50% 50%的时候,运行效果就是下面的这样:

技术分享

按照上文中的背景图的位置的计算公式x:(300-510)*50%=-105;y:(300-382)*50%=-41。

这就是我在这篇博客想表达的当background-position指定为百分数时候的情景。然而,知道这个有神马用呢?毛主席就曾教导我们说学习的目的全在于应用。就算你理论知识掌握的再多,不知道什么地方能用到,不知道其使用场景那也是没有价值的。

在做移动端的页面的时候,我们会想办法去适配各种不同屏幕大小的屏幕。这个问题,在pc端,有些时候,同样要考虑。然而这跟background-position又有神马关系?当我们在做有些活动页面的时候,对于那些铺满一整屏的页面,backgroundposition就能派上用场了。

对于pc端的活动页面,设计师出的设计稿的大小一般都是基于1920px的宽度。其内容器往往只有1000px或1200px的大小居中。假设内容区大小为1000px入下图

技术分享

为了让页面能在1000px宽度以上的各个浏览器中都能良好的显示,这是就backgrundposition出场的时候了。

我通常的做法就是body {background: url(bg.jpg) 50% 0 no-repeat}

.content {

    widh: 1000px

    margin-left: auto;

    margin-right: auto;

    overflow: hidden;

}

我们把设计稿的背景图做成宽度为1920宽度的背景图设计为body的背景图,位置设置为:50% 0。这样只要是屏幕在1000px像素以上都能良好显示。而且还是自适应的。这条是笔者自己的做的页面的业务需求关于backgroundposition的用法。如果您还知道其它的相关的使用场景或用法欢迎分享交流。

 

background-position还可以这样用

标签:

原文地址:http://www.cnblogs.com/submerge/p/5178120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!