background-position还可以这样用
文章同步至微信公众号: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还可以这样用的更多相关文章
- html5+css3中的background: -moz-linear-gradient 用法
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
- html5+css3中的background: -moz-linear-gradient 用法 (转载)
转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- CSS3 Gradient 渐变
转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...
- jQuery视差滚动插件,(附原理分析,调用方法)
演示地址:http://www.jq22.com/jquery-info1799 jquery插件,使用验证过可用. 分析源代码后总结原理:设置background样式为fixed,判断浏览器滚动距离 ...
- CSS3 Gradient
CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...
- CSS 笔记一(Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width)
Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...
- JQuery_过滤选择器
一.基本过滤器 1.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头. <script type="text/ja ...
- CSS3 线性渐变(linear-gradient) 兼容IE8,IE9
一.线性渐变在 Mozilla 下的应用 语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...
- 不用任何图片,只用简单的css写出唯美的钟表,就问你行吗?
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...
随机推荐
- c++智能指针实现方式1
#include<iostream> using namespace std; // 定义仅由HasPtr类使用的U_Ptr类,用于封装使用计数和相关指针 // 这个类的所有成员都是pri ...
- js正则表达式学习
//几种字符串操作:var str = 'abcdef'; alert(str.search('b')); //弹出1:返回的是b在str中的位置:如果找不到返回-1: alert(str.subst ...
- Java基础语法目录
一.Java相关科普知识1.Java的发展历程2.Java的发展方向3.Java的体系特性二.Java第一个程序1.JavaJDK的安装与环境的配置2.记事本开发Java程序的注意事项与常见问题3.J ...
- 反人类的MyEclipse之-调整JavaScript代码-花括号换行显示
然后将除最后一项外所有的都勾选为Next Line
- win8提升winform软件的权限
在win8系统中,微软提高了系统盘文件的权限,提高了其他系统操作的权限,因此一些桌面应用程序在运行时会报一些权限错误,比如C盘文件操作权限,或注册表操作无权限等. 我之前开发过一款用笔记本一键架设无线 ...
- Mysql zip格式安装
1.下载 文件 2.解压 3.配置环境变量D:\common files\MySqlServer\bin 4.修改配置文件 D:\common files\MySqlServer\my-default ...
- java中static 和 final 的一些使用规则
一.final 1.final变量: 当你在类中定义变量时,在其前面加上final关键字,那便是说,这个变量一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引 ...
- iPhone与iPad在开发上的区别
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Nopcommerce 二次开发2 WEB
using System; using System.Collections.Generic; using System.Linq; using System.ServiceModel.Syndica ...
- IIS 7 中设置文件上传大小的方法
在IIS 6.0中设置文件上传大小的方法,就是配置如下节点: <system.web> <httpRuntime maxRequestLength="1918200&quo ...