我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用。打开这种图片看一下,会发现这张图片上包含了很多小图片,比如:
又如:
这些小图片就是整图分割后的各个部分,把各个部分放在一张图片上,而不是是分别存储成单独的图片,其目的我们都知道,就是减少http请求次数,节省时间和带宽。
那么怎么来实现一张图片在不同的地方只显示其中的一部分呢,这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过,也经常有朋友问我,所以今天就系统的说一下:
我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body、td、p等的背景,道理一样。
代码:
div{ background:#FFF url(image) no-repeat fixed x y;}
|
这里的background的属性值依次为:
#FFF 背景色:(颜色值,背景图片没有覆盖的地方,或者没有背景图片时表现的背景色)
image 背景图片:(这里是图片的地址)
no-repeat 是否重复:(图片小于容器的大小时,默认会重复排列图片以填满容器,no-repeat表示不重复,只有这个时候后面的定位坐标才有用。)
fixed 背景是否随容器滚动:(有两个可选值,scroll滚动,fixed不滚动,默认是scroll)
x y 背景图像的定位:(注意,只有在no-repeat下定位才有意义。这个就是今天要讲的重点)
背景图像定位中我们要明确的几点:
1、两个值前面一个是横向的定位,我们称为x轴方向定位。后面一个值是纵向的定位,我们称为y轴方向定位。如果只有一个值,那默认的就是x轴方向,这时y轴方向就默认的是上下居中对齐,也就是center。
2、坐标轴的原点就是对应容器的左顶点。
3、这个坐标的y轴箭头朝下,也就是右下方(容器内部)x y的值才都为正。
4、x y值分别表示背景图片的左顶点相对于坐标原点(也就是容器的左顶点)的值。
5、x y的值可以用百分比或者px来表示。
6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示,但注意:用“left、right、top、bottom、center”来表示的时候,应用的是对齐规则,而不是坐标规则。x为left是表示图片的左边和容器的左边对齐,为right的时候表示图片的右边和容器的右边对其,y为top的时候表示图片的顶部和容器的顶部对齐,为bottom时表示图片的底部和容器的底部对齐,x y等于center的时候表示居中对齐。
7、x y用百分比或者px表示的时候,其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义,x为负数时候表示图片左顶点在容器左顶点的左侧,y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。
下面我用几个图示来说明一下几种情况,蓝色块表示图片,虚线框表示容器(可以div,td,或者直接就是body),注意只有背景图片在容器内我们才能看见,我用白色表示可见部分,而且超出容器范围的是看不见的,我用灰色表示。容器的左定点的坐标就是(0,0)。
第一张,背景图片和容的左上对齐,0px 0px 也可以写成left top
第二张,背景图在容器中间,定点坐标为正值
第三张,背景图部分在容器左上,定点坐标为负值
---------------------------------------------------------------------------
到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片,返回去我们看一下开始的时候介绍的两个图片,我们就是可以用:背景定位和容器内才可见这两个性质来随意的调用整张图片的某一部分。
但是我们为了调用方便,在排列这些小图片的时候要讲究一点规则,比如:小图之间的距离通常是调用小图的容器的大小,或者距离更大一点,这样就可以避免在容器内显示出我们不愿意显示的图片!
补充一点,如果定位用的是百分比话,算法比较特殊。我举个例子:
代码:
background:#FFF url(image) no-repeat fixed 50% -30%;
|
这个时候图片应该在容器的什么位置呢,算法公式如下:
图片左顶点距容器左顶点的坐标位置为
x:(容器的宽度-图片的宽度)x50%
y:(容器的高度-图片的高度)x(-30%)
得到的结果应用坐标法则,差值如果为负数,百分比为正那么运算结果是负值。如果差值为负数,百分比也为负数,那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。
比如:容器是width:600px;height:600px;而图片是width:200px;height:200px;
我们用上面的样式,可以得到图片位置为:
x:(600px-200px)*50%
y:(600px-200px)*(-30%)
如下图:
分享到:
相关推荐
DIVCSS网页布局实例:十步学会用CSS建站.pdf
《DIV+CSS 3.0:网页布局案例精粹》系统地介绍了CSS样式的基础理论和实际应用技术,并结合实例来介绍使用Div+CSS布局制作网页的方法和技巧。在介绍使用CSS样式进行设计的同时,还结合实际网页制作中可能遇到的问题,...
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
代码为博客实例代码:http://blog.csdn.net/lmj623565791/article/details/31513065 有问题博客中留言
HTML5+CSS3小实例:纯CSS实现文字组成肖像特效
div css实例div css实例div css实例
简单的利用css设置背景和文字案例,有需要的可以下载学习
DIVCSS网页布局实例:十步学会用CSS建站[整理].pdf
DIV+CSS布局:CSS浮动float属性详解 不解释
10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色...
CSS+DIV设计实例:实现让多个DIV排列时居中.txt
10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的...
XHTML代码很简单,就是一个无序列表,不过我们对标题和时间设置了不同的CLASS以方便控制。 Example Source Code
10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色...
/*去除图片边框,默认情况下,链接内的图片在标准浏览器会出现边框*/ display:block; position: absolute;/*用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/ top:5px;/*这里的5px...
【html+css+js】小实例:日月交替效果
非常好看的特效,只能用炫酷来形容,感兴趣就下载看看吧,用在自己的网站觉得吸引眼球!
CSS实例:vertical-align属性让网页层居中. vertical-align属性使网页层居中 网页源代码如下: <html><head><style>body{TEXT-ALIGN: center;}#center{MARGIN-RIGHT: auto;MARGIN-LEFT: auto;...
代码为博客实例代码:http://blog.csdn.net/lmj623565791/article/details/34120047 有问题博客中留言
一个经典的CSS实例