background-position
这里先说像素  百分比比较复杂
background-position:xxpx xxpx  这里第一个值指的是x轴坐标  第二个值是y轴坐标
这里使用的坐标系和数学中的坐标系不同   它大概是这样的
----------------->  x轴
|
|
|
|
|
|
|
|
V
y轴

先说说图片比div小得情况 http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position
此时移动的是图片
再说说几个特殊的值  x轴 left right center y轴 top bottom center
left和top相当于0px right和bottom相当于使图像到达边界的最大值 center就是使图像来到中间位置的值
所以可以用center center来使图片居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Untitled Document</title>

    </head>

    <style type="text/css">

    .one{

        width: 500px;

        height: 800px;

        border: 1px solid black;

        background-image: url(http://s1.meituan.net/www/css/i/sp-header-new.vefe0f047.png);

        background-repeat: no-repeat;

        background-position: right bottom;/*使图片停靠在div的右下区域*/

        background-position: center center;/*图片在div的中间位置*/

        background-position: center top;/*横轴上 图片居中 纵轴上 图片靠顶*/

        background-position: 30px 50px;

    }

    .two{

        width: 43px;

        height: 40px;

        border: 1px solid black;

        background-image: url(http://s1.meituan.net/www/css/i/sp-header-new.vefe0f047.png);

        background-position: right bottom;/*和前面的规则一样 还是停留在右下区域  确切的说 使得图像的右下角 对齐于div的右下角*/

        /*另外一种理解的方式 先假设div区域很大 根据one里面那样对齐好图片之后 因为是停靠在右下区域

        抓住div的右下角不动  缩小div*/

        /*最好的理解方式是 尤其是对于div小于原始图片很多的时候  这里我们移动的是div  对于right bottom

        就是将div相对图片来说  移动到图片的右下角的位置*/

        background-position: center center;/*将div移动到相对于图片的中心位置*/

        background-position: center top;/*将div移动到相对于图片的x轴中间 y轴的顶部*/

        background-position: -43px -150px;

        /*根据书上的解释  我们说是图片左上角 相对于div左上角在x轴反向移动43px y轴反向移动150px*/

        /*或者使用我的理解方式  div相对于图片 x轴移动43px  y轴移动150px*/

    }

    </style>

    <body>

        当图片比div小的时候 这个x轴 y轴的数值表示的是图片左上角距离div左上角的距离

        <div class='one'></div>

        当图片比div大的时候 可以通过x轴 y轴设置负值来实现对图片的裁剪

        实际上就是控制图片位置  显示只需要显示的部分

        <div class='two'></div>

    </body>

</html>

background-position 个人理解的更多相关文章

  1. 对position的理解

    作者:zccst 先看看手册 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "t ...

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

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

  3. CSS之Position详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...

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

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

  5. CSS position属性 标签： css 2016-09-06 15:58 78人阅读 评论(0) 收藏

    踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...

  6. CSS之Position全面认识

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属 性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型 ...

  7. css3的Background新属性

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

  8. css3——position定位详解

    最近热衷于前端的开发,因为突然发现虽然对于网站.应用来说,功能处于绝对重要的地位,但是用户体验对于用户来讲同样是那么的重要,可以说是第一印象.最近在开发当中发现以前对于css中的position的理解 ...

  9. 解析position定位

    关于position定位(所有主流浏览器都支持 position 属性),大家会联想到relative和absolute,下面我就讲一下relative和absolute分别是相对于谁进行定位的? 在 ...

  10. 提升布局能力！理解 CSS 的多种背景及使用场景和技巧

    CSS background是最常用的CSS属性之一.然而,并不是所有开发人员都知道使用多种背景.这段时间都在关注使用多种背景场景.在本文中,会详细介绍background-image`属性,并结合图 ...

随机推荐

  1. ruiy_ocfs2

    http://docs.oracle.com/cd/E37670_01/E37355/html/ol_instcfg_ocfs2.html

  2. 成都Uber优步司机快速注册攻略（外地车牌也可加入，不用现场培训）

    我加入Uber司机有一段时间了,有一些经验和感想分享给大家,让大家少走些弯路.目前加入优步不收取任何费用,不需要抢单,时间安排自由灵活,使用便捷,深受大众喜爱. 加入人民优步拼车条件:购买运行5年之内 ...

  3. MSP430与ATK-NEO-6M GPS模块

    近短时间在网上买了一个GPS模块,正好正在学习MSP430单片机,于是决心将GPS模块与MSP430结合起来,同时将代码贴出来,发现网上搜到好多资料都要注册才能下载,有些还要钱.自己动脑,才能自娱自乐 ...

  4. uva 10026 Shoemaker's Problem(排序）

    题目连接:10026 Shoemaker's Problem 题目大意:有一个鞋匠接了n双要修的鞋子, 修每双鞋需要d天,每推迟一天修将亏损val元,问按什么样的顺序修鞋可以保证损失最少,如果有多种情 ...

  5. Forstner算子

  6. Github实例教程-创建库、创建主页

    以README文件为实例,具体介绍github的使用过程 请先下载git,然后配置下面内容: ( 我的系统是debian,其它版本号的UNIX/Linux有区别),windows的临时不清楚. (一) ...

  7. PHP中递归函数的一个常见逻辑问题

    首先.我们得知道递归函数是什么东西.通俗来讲也就是自己调用自己本身的函数. 如今须要设计一段代码.解决1到10叠加的问题. 代码A: <?php //递归函数 $num=10; function ...

  8. 使用 system.io.filesysteminfo 来查找文件。

    如何快速搜索你想找到文件呢.大家知道Windows系统自带了搜索,很方便,下面介绍自己编写的也可以达到同样的效果.注意.有些文件的访问需要更高的权限.这里暂且去掉那些文件目录的搜索.不然会出现erro ...

  9. php中0,空,null和false的区别

    <? $str1 = null; $str2 = false; echo $str1==$str2 ? ‘相等’ : ‘不相等’; $str3 = ""; $str4 = 0 ...

  10. android sdk Manager path