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. LINQ to SQL的CRUD操作

    创建数据对象模型 sqlmetal /code:"C:\MyProjects\VS2008\Data\LinqConsoleApp2\LinqConsoleApp2\northwnd.cs& ...

  2. 吝啬的国度(dfs+vector)

    吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...

  3. Android UI设计

    Android UI设计--PopupWindow显示位置设置 摘要: 当点击某个按钮并弹出PopupWindow时,PopupWindow左下角默认与按钮对齐,但是如果PopupWindow是下图的 ...

  4. java String分类trim，substring，replaceAll，indexOf使用功能

    1.trim性能 特征去掉字符串首尾空格,防止不必要的空格导致错误. public class TrimTest { public static void main(String[] args) { ...

  5. SGU 201 Non Absorbing DFA （DP）

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 题意:给出一个自动机,给出所有的转移,其中还有一个 ...

  6. 2.Freshman阶段学习内容的确定

    我刷知乎.在知乎上答题的程序员,不是很牛逼就是更牛逼,说起各种系统.各种系统的各种版本.各种语言.数据库.算法.IT届的各种圣战都有板有眼.信手拈来.头头是道,不得不服.这导致了一些非常严重的问题:我 ...

  7. sort函数简单调用方法

    向量调用sort函数排序,一般有三个参数,即为sort(v.begin(),v.end(),cmp),第三个传入的是比较函数的地址(函数名),决定你比较的性质,运用灵活 #include<ios ...

  8. [Swust OJ 385]--自动写诗

    题目链接:http://acm.swust.edu.cn/problem/0385/ Time limit(ms): 5000 Memory limit(kb): 65535    Descripti ...

  9. BZOJ 1770: [Usaco2009 Nov]lights 燈( 高斯消元 )

    高斯消元解xor方程组...暴搜自由元+最优性剪枝 -------------------------------------------------------------------------- ...

  10. 关于Python中的yield(转载)

    您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ? 我们先抛开 generator,以一个常见的编程题目来展示 yield ...