css里有个background-position 属性,用来设定背景图沿x ,y 方向的偏移量
可以设置像素值,百分比,或者固定的值,如top,bottom,center, left,right
下面例子中用的图片大小是200*200的,容器是300*280的
一般情况下设定 background-repeat: no-repeat 且 容器大于图片,图片位于左上角,如下图
此时如果设置:background-position-x:40px;
图片会向右偏移40px
如果设置为负数,则向左偏移,background-position-x: -40px;如下图
以上是设置固定像素值的情况,也可以设置百分比,设置百分比后,实际偏移量计算公式是
以X轴为例 偏移量 =(容器宽度 - 图像宽度)* 百分比
设置background-position-x:40%;
实际偏移量是(300 - 200)* 40% = 40px, 可以看到和直接设置background-position-x:40px效果一样。
如果设置top……等固定值,效果等同百分比具体如下
X方向:top=0%(上对齐), center=50%(中对齐), bottom=100%(下对齐)
Y方向:left=0%(左对齐), center=50%(中对齐), right=100%(右对齐)
以上只是X方向的例子,Y方向和X方向原理一样,正数向下偏移,负数向上偏移。
PS:当容器小于图片的时候,设置百分比时,正数百分比计算出来的值是负数,向负方向(左,上)偏移。
当容器和图片一样大小的时候,不论设置百分比为多少,最终得到的偏移量都为 0。
大部分情况下会使用background-position同时设置x,y方向,如果此时只设置一个值如 background-position:40px; 那么此值作用于X方向, Y方向被设为center,效果如下
相关推荐
批量输出 CSS background-position 属性的定位像素值
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
background-position 的学习.zip 欢迎下载
CSS中背景图片定位方法:background-position的用法,附带算法
语法:background-position : length || length background-position : position || position 取值:length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | ...
background-position鱼游动特效是一款基于css3 animation transform属性制作两条游动的鲨鱼动画特效。
css 之 background-position-x
动画效果全部放在一张图片里,然后通过background-position来移动背景位置 达到想要的效果
这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
background-position的说明: 设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( ...
#nav .n01 a:visited { background-position:0 -114px; } #nav .n01 a:hover { background-position:0 -38px; } #nav .n01 a:active { background-position:0 -76px; } #nav .n02 a:link { background-position:-...
最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍
博文链接:https://ice-cream.iteye.com/blog/201365
复制代码代码如下: .nav { background:transparent url(images/y.gif) no-repeat scroll 0 0; height:42px; width:980px; font-size:12px; list-style:none; } .nav ul{ padding-left:4px; } .nav li{position:...
background-position有两个属性值, background-position:x | y,用法上可以对其一个属性单独使用 background-position-x 和 background-position-y。 准备工作完毕,开始写代码 第一步 由于这次需要的div