http://blog.csdn.net/JeamKing/article/details/5617088   注:这是别人博客链接地址  具体效果图片可以查看此链接

语法:
background-position : length || length
background-position : position || position
取值:
length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位
position  : top | center | bottom | left | center | right

说明:
设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition。

注: 本文中使用的图片大小为 300px*120px,为了能很清晰的表达图形的哪部分被隐藏了,按照图片的大小平均分成了9等份。同时背景图片容器区域绘制出绿色边框清晰显示容器的范围。
1、background-position:0 0;
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。例如:

    .Container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll 0 0;
        border:5px solid green;
    }

效果如下图1:

                                        图 1

2、该属性定位不受对象的补丁属性( padding )设置影响。

例如,我们给容器元素增加padding值,背景图片的左上角还是与容器元素的左上角对齐。在此处只是影响到了容器元素的高度和宽度。

    .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll 0 0;
        border:5px solid green;
        padding:50px;
    }

效果如图2:

                                                   图 2

3、background-position:-70px -40px;

图片以容器左上角为参考向左偏移70px,向上偏移 40px,示例:

    .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll -70px -40px;
        border:5px solid green;
    }

效果如图3:

                                  图 3

4、background-position:70px 40px;

图片以容器左上角为参考向右偏移70px,向下偏移 40px,示例:

    .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll 70px 40px;
        border:5px solid green;
    }

效果如图4:

                                   图 4

5、background-position:50% 50%;

图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

 例如: .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll 50% 50%;
        border:5px solid green;
    }

其x=(300-210)*50%=45px;

y=(150-120)*50%=15px;

效果如图5:

                                     图 5

由于超出部分别往两端延伸,所以我们可以先制作一张宽度足够宽图片设置水平值为50%,这样可以用来适应不同的浏览器,使得图片水平充满浏览器窗口并且居中。替代margin:50 auto的功能。

6、background-position:-50% -50%;

等同于x:-{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:-{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

    .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll -50% -50%;
        border:5px solid green;
    }

效果如图6:

                                     图 6

7、background-position:100% 100%;

图片处于容器元素的右下角,与 background-position:right bottom;效果等同。

示例:

    .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll 100% 100%;
        border:5px solid green;
    }

效果如图7:

background-position (转)的更多相关文章

  1. html5+css3中的background: -moz-linear-gradient 用法

    在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...

  2. html5+css3中的background: -moz-linear-gradient 用法 (转载)

    转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...

  3. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  4. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  5. jQuery视差滚动插件,(附原理分析,调用方法)

    演示地址:http://www.jq22.com/jquery-info1799 jquery插件,使用验证过可用. 分析源代码后总结原理:设置background样式为fixed,判断浏览器滚动距离 ...

  6. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

  7. CSS 笔记一(Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width)

    Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...

  8. CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

    一.线性渐变在 Mozilla 下的应用     语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...

  9. 不用任何图片,只用简单的css写出唯美的钟表,就问你行吗?

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...

  10. 利用CSS3 中steps()制用动画

    .monster { width: 190px; height: 240px; margin: 2% auto; background: url('http://treehouse-code-samp ...

随机推荐

  1. LINUX 设置ll的时候显示日期的格式

    1.临时更改显示样式,当回话结束后恢复原来的样式 export TIME_STYLE='+%Y-%m-%d %H:%M:%S'    # 直接在命令中执行即可 2.永久改变显示样式,更改后的效果会保存 ...

  2. magento目录结构说明,Magento文件夹结构说明,Magento folder structure

    /app – 程序根目录     /app/etc – 全局配置文件目录     /app/code – 所有模块安装其模型和控制器的目录     /app/code/core – 核心代码或经过认证 ...

  3. 初始Python

    一.Python简介 1.Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新 ...

  4. lua unit test introduction

    Unit Test Unit testing is about testing your code during development, not in production. Typically y ...

  5. css旋转

    翻转180度 /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the ...

  6. sprint3个人总结

    转眼间,这个学期又过去了,真的是忙碌的一个学期,却是有点充实,特别是我们的软件工程这门课程,我们这次做的是公众号开发功能,说实话,当初对这个项目有兴趣是因为自己也在弄自己一个300多人的公众号,对于这 ...

  7. c# 用户名 密码 访问 局域网共享

    #region Ping 返回true则代表可以连接成功 public bool Ping(string remoteHost) { bool Flag = false; Process proc = ...

  8. debian的版本演进

    debian有三个发行版本,stable版.testing版和unstable版. 其中,unstable版本是开发者正在开发的版本,它里面保存着debian的开发者当前的工作.这个版本是不断在被更新 ...

  9. mysql 增删改查最基本用法小结

    目录: 1.新建数据库 2.新建数据表 3.查看表结构 4.增删改查 建立一个数据库students 建立一块数据表class1 内容包括: id 主键 自动编号 无符号位 SMALLINT类型 na ...

  10. myeclipse2014新建maven项目

    1,首先安装maven,并配置. 2,新建maven project. 3,选择maven-archetype-webapp. 4,填写afrifact ID即为项目名称. 5,finish后 bui ...