background-position:x y;

百分比定位并不能直观的看出来，需要通过计算。

background-position百分比计算公式：

(容器宽度—背景图片的宽度)*x%=xpx
(容器高度—背景图片的高度)*y%=ypx

上节我们使用的图片也可以继续拿来做练习：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>背景定位练习</title>

</head>

<body>

<style rel="stylesheet" type="text/css">

.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9 {

float: left;

width:100px;

height: 100px;

background: #666 url(18.png) no-repeat;

margin-left: 10px;

}

/*

(100px-400px)*x%=-300px; 那么x=100

(100px-400px)*y%=0; 那么y=0

*/

.box1{background-position:100% 0%}

/*

(100px-400px)*x%=-200px; 那么x=66.6666

(100px-400px)*y%=0; 那么y=0

*/

.box2{background-position:66.6666% 0%}

/*

(100px-400px)*x%=-100px; 那么x=33.3333

(100px-400px)*y%=0; 那么y=0

*/

.box3{background-position:33.3333% 0%}

/*

(100px-400px)*x%=0px; 那么x=0

(100px-400px)*y%=0px; 那么y=0

*/

.box4{background-position:0% 0%}

/*

(100px-400px)*x%=0px; 那么x=0

(100px-400px)*y%=-100px; 那么y=33.3333

*/

.box5{background-position:0% 33.3333%}

/*

(100px-400px)*x%=0px; 那么x=0

(100px-400px)*y%=-200px; 那么y=66.66

*/

.box6{background-position:0% 66.6666%}

/*

(100px-400px)*x%=0px; 那么x=0

(100px-400px)*y%=-300px; 那么y=100

*/

.box7{background-position:0% 100%}

/*

(100px-400px)*x%=-300px; 那么x=100

(100px-400px)*y%=-200px; 那么y=100

*/

.box8{background-position:100% 66.6666%}

/*

(100px-400px)*x%=-300px; 那么x=100

(100px-400px)*y%=-300px; 那么y=100

*/

.box9{background-position:100% 100%}

    </style>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

    <div class="box4"></div>

    <div class="box5"></div>

    <div class="box6"></div>

    <div class="box7"></div>

    <div class="box8"></div>

    <div class="box9"></div>

</body>

</html>

预览效果：

因此不难得出background-position的等价写法：

left top,top left ,0 0等价于 0% 0%

center center 等价于 50% 50%

bottom right,right bottom 等价于 100% 100%

center right,right center 等价于 100% 50%

bottom center, center bottom 等价于 50% 100%

left center,center left 等价于 0% 50%

bottom left,left bottom 等价于 0% 100%

......

css背景图片定位练习（二）： background-position的百分比的更多相关文章

  1. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  2. css背景图片定位练习（一）

    首先准备一张雪碧图,Like this 背景图片的定位方法有3种,比较常用的两种为 关键字:background-position: top left; (top/bottom/cennter/lef ...

  3. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  4. css背景图片位置：background的position（转）

    css背景图片位置:background的position   position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...

  5. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  6. CSS 背景图像 背景图片定位

    背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...

  7. HTML+CSS—背景图片、图片定位

    设置背景图片格式: background-image: url(img/ic.jpg); 注意点: 如果父容器面积大于背景图片,默认显示该图片整面平铺 设置是否需要平铺属性: background-r ...

  8. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  9. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

随机推荐

  1. LightOJ1057 Collecting Gold（状压DP）

    这道题可以想到几点: 整个行程可以看作一次次的行走,每次行走都是用最短的路程从某一非空点到达另外一非空点: 两点间最少的步数是二者x和y坐标差的最大值: 返回原点这个过程,肯定是取完最后一个黄金后直接 ...

  2. BZOJ3834 : [Poi2014]Solar Panels

    问题相当于找到一个最大的k满足在$[x_1,x_2]$,$[y_1,y_2]$中都有k的倍数 等价于$\frac{x_2}{k}>\frac{x_1-1}{k}$且$\frac{y_2}{k}& ...

  3. TYVJ P1086 Elevator Label:dp

    背景 广东汕头聿怀初中 Train#2 Problem4 描述 现有N种箱子,每种箱子高度H_i,数量C_i.现选取若干箱子堆成一列,且第i种箱子不能放在高度超过A_i的地方.试求最大叠放高度. 输入 ...

  4. Linux下java获取CPU、内存、磁盘IO、网络带宽使用率

    一.CPU 使用proc文件系统,"proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以文件系统的方式为访问系统内核数据的操作提供接口.用户和应用程序可以通过proc得 ...

  5. iOS移动开发周报-第25期

    iOS移动开发周报-第25期 [摘要]:本期iOS移动开发周报带来如下内容:苹果发布 iPhone6 和 Apple Watch.Swift 1.0 GM发布.Xcode 6支持PDF Vector作 ...

  6. Function Scope

    JavaScript’s function scope means that all variables declared within a function are visi-ble through ...

  7. 让VIEWSTATE从页面中完全消失(小技巧)

      VIEWSTATE是个好东西,是asp.net的一大创举,给web开发带来了极大的便利,然后这种便利是一种双刃剑,尤其是在前台页面,大多数前台页面都是用来展示列表数据,和用户交互的地方现在大都采用 ...

  8. MongoDB高可用模式部署

    首先准备机器,我这里是在公司云平台创建了三台DB server,ip分别是10.199.144.84,10.199.144.89,10.199.144.90. 分别安装mongodb最新稳定版本: w ...

  9. HDU 1016 DFS

    很简单的深搜 只要看出来是深搜... 注意判断最后一点是否与加一为质数 #include<stdio.h> #include<string.h> #include<alg ...

  10. Javascript 笔记与总结（1-2）词法分析

    词法分析,按顺序分析 3 样: 第 1 步:先分析参数 第 2 步:再分析变量声明 第 3 步:再分析函数声明 一个函数能使用的局部变量,就从上面 3 步分析而来. 具体步骤: 0:函数运行前的瞬间, ...