CSS中背景图片定位方法

作者: 阮一峰

CSS中背景图片的定位,困扰我很久了。今天总算搞懂了,一定要记下来。

在CSS中,背景图片的定位方法有3种:

  1)关键字:background-position: top left;

  2)像素:background-position: 0px 0px;

  3)百分比:background-position: 0% 0%;

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

前两种定位,都是将背景图片左上角的原点,放置在规定的位置。请看下面这张图,规定的位置是"20px 10px"和"60px 50px",都是图片的原点在那个位置上,图中用X表示。

bg2008050701.png

但是第三种定位,也就是百分比定位,不是这样。它的放置规则是,图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合。比如,如果放置位置是"20% 10%",实际结果如下图,可以看到这个点是在图片本身的"20% 10%"的位置上。

bg2008050702.gif

下面是一个有趣的例子。

背景图片是四个边长为100px的方块叠在一起:

bg2008050703.png

请问怎样才能将其横过来:

bg2008050704.png

答案是,在网页中先设置四个div区域:

<div class="box1">
</div>

<div class="box2"">
</div>

<div class="box3">
</div>

<div class="box4">
</div>

然后,这样编写CSS:

.box1, .box2, .box3, .box4 {
  float:left;
  width:100px;
  height:100px;
  position:relative;
  background: #F3F2E2 url(1234.png) no-repeat;
}

.box1 {
  background-position:0% 0%;
}

.box2 {
  background-position:0% 33.33333%;
}

.box3 {
  background-position:0% 66.66666%;
}

.box4 {
  background-position:0% 100%;
}

点击这里查看最后的效果。可以看到第二和第三个方块的设置,并不是一般想象中的"0% 25%"和"0% 75%"。

不过说实话,这个例子用像素设置法更容易一些。使用百分比设置的主要优势在于,当页面缩放的时候,背景图片也会跟着一起缩放,具体请参考下面"延伸阅读"中的第二篇文章。

[延伸阅读]

1. CSS: Using Percentages in Background-Image

2. Creating Liquid Faux Columns

(完)

留言(32条)

其实很多你博客上的文章我看不懂,但是我还是经常来逛逛
从你的文章来看,你每天都要获取很大的信息量,对一些事情有自己的看法,而且也从不炫耀自己的知识,感谢你能够把你看到学到的东西和大家分享,我会坚持看你的博客。祝好。

很受用,尤其是百分比的background-position。最后那个例子中的值应该怎样计算呢?如果是12345呢?

峰哥,我把老俞的树和草翻译了一下,想用英语讲给学生听(初中水平。你看要是有改的可能你就改一改,要是错误太多,就算了。

我们人的生活方式有两种方式,
第一种方式是像草一样活着,你尽管活着,每年还在成长,
但是你毕竟是一棵草,
你吸收雨露阳光, 但是长不大。
人们可以踩过你,
但是人们不会因为你的痛苦,而他产生痛苦;
人们不会因为你被踩了,而来怜悯你,
因为人们本身就没有看到你。
所以我们每一个人,
都应该像树一样的成长,
即使我们现在什么都不是,
但是只要你有树的种子,
即使被人踩到泥土中间,
你依然能够吸收泥土的养分,
自己成长起来。
当你长成参天大树以后,
遥远的地方,人们就能看到你;
走近你,你能给人一片绿色。
活着是美丽的风景,
死了依然是栋梁之才,
活着死了都有用。
这就是我们每一个同学做人的标准和成长的标准。
There are two kinds of lifestyles.
One is living like grass.
You are alive and grow every year.
But you are just grass.
You can enjoy rain and sunshine
but you can not grow tall.
People can walk on you.
But they don’t fell painful because of your pain.
They will not have pity on you because you are stepped on.
Because they haven’t seen you at all.
So everyone of us should grow up like trees.
Even if we are nobody at the moment,
but as long as you are the seed of a tree.
Even if you are stamped into the earth.
You still can get the nutrient in the soil and grow up yourself.
When you become a big tree.
People can see you far away.
You can show your color of green when people are near you.
When you are alive you are nice to look at.
When you are dead you can be used to build houses.
You are useful whether you are alive or dead.
This is the rule we should follow when we behave and grow .

用像素定位的话,会不会有个问题?客户端显示器分辨率不一样的话,图片的位置是不一样的

应该写成
.box2 {
background-position:33.33333% 0%;
}

不知为什么成设计这样,直接定位于背景的北分比不是更简单吗?

引用崔骄峰的发言:

峰哥,我把老俞的树和草翻译了一下,想用英语讲给学生听(初中水平。你看要是有改的可能你就改一改,要是错误太多,就算了。

我觉得翻译得很好,没什么需要特别改动的,就是seed of tree好像可以改成seedling。

引用sean的发言:

用像素定位的话,会不会有个问题?客户端显示器分辨率不一样的话,图片的位置是不一样的

对,像素定位没有弹性,遇到需要伸缩的场合就不行。

引用小胖的发言:

最后那个例子中的值应该怎样计算呢?如果是12345呢?

解方程的结果是,第二个方块应该写成“0% 25%”。

谢谢峰哥.

这个百分比的分配的公式是如何的呢?

如果是12345的时候.
100*X%+100=500*X%
x=25

不知道这样对不对

ls正解

那个百分比的分配公式为什么是这样的呢,能详细说一下吗

上面这三句语句,都将图片定位在背景的左上角,笔误了吧。
background-position: top right; 这样才是的吧?

我找了好多天终于找到答案了。谢谢阮哥

终于找到了我想要的了,感谢楼主的分享,转载了,希望楼主不要建议。因为我感觉像这么好的文章应该让更多人去看到。

很有意思,还没注意到

难道IE6不支持background-position?我只要一用到它立马背景不显示!!!

虽然文章很久远.但还是很受用.

峰哥,文章我仔细看了,有点不同的想法

1.先纠正一个书写错误:文章开头那三种定位法,第一种,左上角应该是left,top

2.我觉得left,top这个跟n px这种定位不同,我做了个小页面试了下,觉得,如果用left,top那么会用图片的left,top这个点与box的left,top点对应,同样left,center left,right这些也是一样的(确切的说这种定位方式只有9个定位点可用)。

引用火柴的发言:

先纠正一个书写错误:文章开头那三种定位法,第一种,左上角应该是left,top

谢谢指出,已经更正了。

.nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right -163px no-repeat;}

这是我见过的一个坐标,right -163px。

http://zhidao.baidu.com/question/279924567.html

这里面有关于这个的图片。我一直闹不懂,还请不吝赐教。

请问,背景图片像素太大了怎么办呢,一个固定大小的div只能显示一部分的图像,Chrome里还可以用css3的background-size来控制,使全部图像显示出来,IE下我就不知道怎么搞了,求大神指点!谢了。

我想知道百分比是怎么算出来的?看明白操作步骤了,就是没明白如何计算出来的。。。

请问如何定位某个图片块 比如图片中心的某一块 并且 背景重复呢?

如下博文可以很好的解释对背景百分比的解释:http://blog.csdn.net/jeamking/article/details/5617088

谢谢,非常有帮助o(≧v≦)o~~好棒

学习了,很受用

计算方法:x/100=(100+x)/400就可以计算出x%的值。其实不明白也不要紧,这么做背景也就是研究着玩玩吧。否则谁这么难为自己啊!~~像是做奥数似的!~

博主:x/100=(100+x)/400这个计算左边是依据什么,右边又是一句什么呢?为了弄懂这个,我都两天没胃口了。

看不明白,取值跟想象中差别太大了。这个背景图片定位问题一直困扰,我都是用单个图片解决。不为难自己啦。

我觉得没有必要给box加那个position:relative的属性,能问下楼主加这个属性意义何在吗?

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接