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. CentOS 6.4 U盘启动盘制作、安装及遇到的问题解决

    用UltraISO Premium Edition  9.3 制作的CentOS 6.4 U盘安装盘, 制作过程參考我写的百度经验:UltraISO制作U盘系统盘安装CentOS经验分享 安装时提示P ...

  2. Node.js笔记4

    4. 文件系统 fs fs模块是文件操作的封装,提供了同步跟异步操作2个版本 * fs.readFile(filename,[encoding],[callback(err,data)]) 是最简单的 ...

  3. c# 遍历文件夹及其所有文件

    利用VS创建一个winform应用程序,遍历指定文件夹(photos)内的所有文件夹及其文件.具体程序如下: namespace 遍历文件夹及其所有文件 { public partial class ...

  4. iOS合并静态库文件

    具体命令如下(在控制台输入如下命令): lipo -create 其中一个要合并的静态库 另一个要合并的静态库 -output 合并后的静态库

  5. redis之入门操作

    下载安装 $ wget http://download.redis.io/releases/redis-3.2.3.tar.gz $ tar xzf redis-3.2.3.tar.gz $ cd r ...

  6. 简单的UIScrollView 下拉刷新

    这里只贴主要代码 #import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate&g ...

  7. 弹出窗口内嵌iframe 框口自适应

    说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...

  8. python的reduce()函数

    reduce()函数也是Python内置的一个高阶函数. reduce()函数接收的参数和 map()类似,一个函数 f,一个list,但行为和 map()不同,reduce()传入的函数 f 必须接 ...

  9. java从c struct传来的字节数组中取值

    public int getInt(byte[] array,int index) { return (array[index]  & 0xff)  | (array[index + 1] & ...

  10. w3wp.exe CPU过百问题

    w3wp.exe CPU过百问题 最近发布在windows  server2012  IIS8.0上的一个WebAPI项目,才几十个人在线,CPU就会出现过百情况,并且CPU一旦过百应用程序池就自动暂 ...