position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的

1.background:url(../image/header.jpg) no-repeat left top;  /*相当于0%  0%*/
表示背景图片在指定div的位置,从左上角开始

2.background:url(../image/header.jpg) no-repeat right bottom;  /*相当于100%   100%*/
表示背景图片从指定div的右下角开始显示图片,并且背景图片右下角与div的右下角重合

3.background:url(../image/header.jpg) no-repeat 300px 200px;   
即背景图片距div的左边界300px,距div的上边界200px。

4.background:url(../image/header.jpg) no-repeat 50% 50% ;  
/* 相当于background:url(../image/header.jpg) no-repeat center ; */
背景图片在div中水平方向与竖直方向都居中显示

5.background:url(../image/header.jpg) no-repeat 300px;   /*相当于300px 50%*/
若只写一个参数,则另一个参数默认为50%,即背景图片距div的左边300px,而竖直方向居中。

6.background:url(../image/header.jpg) no-repeat -300px -100px ;
背景图片相对于div左上角(0px,0px) 又向左移动了300px,向上移动了100px

7.background:url(../image/header.jpg) no-repeat 30% 30%;

背景图片的(30%, 30%)的点与其所属的div的(30%, 30%)的点对齐。

但注意:百分比值同时应用于元素div及其背景图像。
例如:
(1)当在某一元素里居中背景图像时,图像中被描述为50% 50%的点将与元素中同样描述的点对齐。
(2)要使背景图像横跨元素的三分之一,纵跨三分之二,可以按如下声明:
         background:url(beijing.gif)   no-repeat  33% 66%; 
         这就使得图像上相对于左上角水平为三分一,垂直为三分之二的那个点与元素中的同样的点重合。

注意,百分比的水平值总是在前面。如果将上例中的这两个百分比值交换位置,那么背景图像将被放于水平三分之二,垂直三分之一处。同样,当只给出一个百分比值时,这个值为水平值,而另一个垂直百分比值被假定为50%。当只有一个值给出时,另一个被假定为center。

css背景图片位置:background的position的更多相关文章

  1. css背景图片位置:background的position(转)

    css背景图片位置:background的position   position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...

  2. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  3. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  4. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  5. 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  6. 【转】链接伪类(:hover)CSS背景图片有闪动BUG

    来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...

  7. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  8. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  9. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

随机推荐

  1. hibernate 对象状态异常:object references an unsaved transient instance - save the transient instance before flushing

    我的问题出在,删除的对象对应的表中有一个外键,关联着另外一个表,可是另外一个表中没有数据,所以报了这个错误. 参考http://www.cnblogs.com/onlywujun/archive/20 ...

  2. SQL2005 学习笔记 窗口函数(OVER)【转】

    1.简介: SQL Server 2005中的窗口函数帮助你迅速查看不同级别的聚合,通过它可以非常方便地累计总数.移动平均值.以及执行其它计算. 窗口函数功能非常强大,使用起来也十分容易.可以使用这个 ...

  3. hibernate错误提示

    2016-05-03 09:45:03,275 -- WARN  -- org.hibernate.internal.util.xml.DTDEntityResolver.resolveEntity( ...

  4. USACO 2.2 Party Lamps 派对灯 (lamps)

    题目描述 在IOI98的节日宴会上,我们有N(10<=N<=100)盏彩色灯,他们分别从1到N被标上号码.这些灯都连接到四个按钮: 按钮1:当按下此按钮,将改变所有的灯:本来亮着的灯就熄灭 ...

  5. 配置处理结果result

    Action处理完用户请求后返回一个字符串,整个字符串就是一个逻辑视图名. 除此之外,struts2还支持多种结果映射,struts2将结果转为实际资源时,不仅可以是JSP视图资源,也可以是FreeM ...

  6. div模块变灰

    整站变灰目前没发现什么特别好的办法,但是div(或者其他标签模块)模块变灰方法兼容性还不错. .gay_box{ filter: grayscale(100%); -webkit-filter: gr ...

  7. apache2.4下载与安装

    step1 下载apache 百度“apache下载”,找到官网链接,如下 2. 点进去后选择 Files for microsoft windows,如下 3. 前三个任选一个,这里我们选第一个,如 ...

  8. C#编写自动关机程序复习的知识

    首先一个程序第一要素是logo 在设置里面可以设置程序图标,在ICON里设置. ICON图标可以在网上下载. 这些都是表面功夫 程序中涉及到Buton.Label.Timer.Notiflcon控件 ...

  9. union 与struct的空间计算

    一.x86 总体上遵循两个原则: 整体空间----占用空间最大的成员(的类型)所占字节数的整数倍 对齐原则----内存按结构成员的先后顺序排列,当排到该成员变量时,其前面已摆放的空间大小必须是该成员类 ...

  10. iOS:NAV+TABLE结合

    功能:点击列表项,用列表字符串作为参数创建一个新视图,新视图默认可以有一个BACK按钮回到上一个视图 // // main.m // Hello // // Created by lishujun o ...