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. python 入门快速学习整理

    Python 入门学习 1  : 对象类型 1 1.1 列表 1 1.2 字典 2 1.3 元组 2 1.4 元组 2 1.4 文件 3 2  : 条件和循环语句 3 2.1  if else语句 3 ...

  2. linux搭建邮件服务器

    一.概述: 在配置邮件服务器之前,先解释几个概念. 通常使用Email都很容易,但是Internet的邮件系统是通过几个复杂的部分连接而成的,对于最终用户而言,我们熟悉的Outlook,Foxmail ...

  3. mysql 数据备份

    一.备份数据库并下载到本地[db_backup.php] php代码: <?php // 数据库参数(此处测试,直接给定,项目中使用配置文件) $cfg_dbname = 'blog'; $cf ...

  4. .NET连接SAP系统专题：.NET调用RFC几种方式（一）

    本来今天是要写一篇关于NCO3.0的东西,就是关乎.NET调用SAP的RFC的,支持VS2010和.NET 4.0等.现在网上到处都是充斥着NCO1.X和NCO2.0,需要用VS2003来使用,都是一 ...

  5. 设计一个有getMin功能的栈

    [说明]: 本文是左程云老师所著的<程序员面试代码指南>第一章中“设计一个有getMin功能的栈”这一题目的C++复现. 本文只包含问题描述.C++代码的实现以及简单的思路,不包含解析说明 ...

  6. MYSQL事务和锁

    mysql事务(一)—转载 2012年12月20日 ⁄ Mysql数据库, 技术交流 ⁄ 暂无评论 一. 什么是事务 事务就是一段sql 语句的批处理,但是这个批处理是一个atom(原子) ,不可分割 ...

  7. 我的Python成长之路---第一天---Python基础（4）---2015年12月26日（雾霾）

    五.数据运算与数据运算符 1.算术运算符 算术运算符 运算符 描述 示例 + 加法 >>> 14 - 5 9 - 减法 >>> 14 - 5 9  *  乘法 &g ...

  8. libCurl的文件上传

    最近在需要使用curl的上传功能,使用libCurl来实现.因此,先使用curl命令操作,然后再使用libCurl实现. 基于Http协议的文件上传的标准方法是: 基于POST Form的文件上传  ...

  9. SSH 配置日记

    1   注意struts2-spring-plugin.jar的导入.    Unable to load configuration. - action  异常.需要导入这个包 2  很久都跑不通的 ...

  10. IPhone多视图切换

    处理IPhone多个view切换是我们常遇到的问题,接下来有个比较实用的方法: 而且还附有创建空项目,内存告急处理和动画效果的实现! 具体步骤: 1.创建一个空的项目,然后添加一个ViewContro ...