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. java 获取随机数的三种方法

    方法1(数据类型)(最小值+Math.random()*(最大值-最小值+1))例:(int)(1+Math.random()*(10-1+1))从1到10的int型随数 方法2获得随机数for (i ...

  2. 2015 11 26 java 配置环境变量

    使用java软件, 须进行改变配置环境变量.需要2步. 第一,在电脑中找到配置环境变量的位置: 我的电脑,属性,高级,环境变量. 第二,进行添加两个变量,更改一个变量: 1,变量名:JAVA_HOME ...

  3. stringstream字符串流

    例题详解 題目:输入的第一行有一个数字 N 代表接下來有 N 行資料,每一行資料里有不固定個數的整數(最多 20 個,每行最大 200 個字元),請你寫一個程式將每行的总和印出來. 輸入: 3 1 2 ...

  4. 【hadoop】14、hadoop2.5的mapreduce的 配置

    配置mapreduce <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href ...

  5. 一个页面从输入URL到页面加载显示完成的详细过程

    下面以访问baidu页面来做一个过程分析 输入 URL:http://www.baidu.com DNS 域名解析 计算机无法识别域名,计算机与计算机之间要想进行通信,必须通过ip地址用来定位该计算机 ...

  6. Android应用开发基础篇（12）-----Socket通信

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/03/03/2378669.html 一.概述 网络通信无论在手机还是其他设备上都应用得非常广泛,因此掌 ...

  7. mysql查询数据库中包含某字段（列名）的所有表

    SELECT TABLE_NAME '表名',TABLE_SCHEMA '数据库名',ORDINAL_POSITION '顺序',COLUMN_NAME '字段',DATA_TYPE '类型' ,CH ...

  8. MyEclipse 在loading workbench 启动卡死

    解决方法: 找到Workspace目录,在.metadata(Mac 下是在 .metadata/.plugins)中删掉以下两个文件 org.eclipse.ui.workbench org.ecl ...

  9. jQuery validate入门

    <html> <head> <meta charset="utf8"></meta> </head> <body& ...

  10. Strata 2014 上的 AzureCAT 粉笔会谈

     本周,AzureCAT 团队非常高兴在 Strata 会议上首次集体亮相.对于那些对 AzureCAT 团队不太熟悉的人来说,我们是 Microsoft 云与企业部门一个核心的国际性团队,由大约 ...