原文:CSS背景图片定位

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

对背景图片的定位就需要用到CSS中的background样式，如：

div{

background-image: url("1234.png");

background-repeat: no-repeat;

background-position: 0px -100px;

}

属性解释：

background-image : none | url ( url )

none

:

默认值。无背景图

url ( url )

:

使用绝对或相对 url 地址指定背景图像

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat

:

默认值。背景图像在纵向和横向上平铺

no-repeat

:

背景图像不平铺

repeat-x

:

背景图像仅在横向上平铺

repeat-y

:

背景图像仅在纵向上平铺

background-position : length || length
background-position : position || position

length

:

百分数 | 由浮点数字和单位标识符组成的长度值。

position

:

top | center | bottom | left | center | right

background-position属性说明：

必须先指定 background-image 属性。

默认值为： 0% 0% 。此时背景图片左上角将被定位于容器的左上角。

如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。

定位图像位置有三种方式：百分比、像素值、对齐方式.

1、对齐方式

对齐方式有5个值top、botton、lef、right、center，分别对应顶部对齐，底部对齐，左对齐，右对齐，居中对齐（对齐就是容器的某一边跟图片的对应边重叠）

上图中包含了三个不同样式按钮，我们可以在鼠标点击和双击时改变它的样式，

代码：

<html>

<head>

<style>

div{

background-image: url("browseBtn.png");

background-repeat: no-repeat;

cursor: hand;

width: 80px;

height: 24px;

}

.button1{

background-position: top;

}

.button2{

background-position: center;

}

.button3{

background-position: bottom;

}

</style>

<script>

function clickButton()

{

document.getElementById('button').className = "button2";

}

function dblclick()

{

document.getElementById('button').className = "button3";

}

</script>

</head>

<body>

<div id="button" class="button1" onclick="clickButton()" ondblclick="dblclick()"></div>

</body>

</html>

展示效果：

默认效果

单击效果

双击效果

类似的我们还可以定义左上、左中、左下、中上、居中、中下、右上、右中、右下几种样式来定位图片，如:

在介绍像素值和百分比前我们要先了解容器的坐标轴概念：

容器的左上角为坐标原点，向右为正向X轴，向左为反向X轴，向下为正向Y轴，向上为反向Y轴，而所谓的像素值就是图片原点和容器坐标原点的坐标差，分别对应background-position中的第一个和第二个参数，这个坐标差的计算就需要我们根据图片和容器的大小来对图片做相应的移动。

2、像素值

上图中包含了大量的图标，现在我们就是选取其中的几个图标来说明如何计算像素值：

<html>

<head>

<style>

.but1, .but2, .but3, .but4{

background-image: url("ui-icons.png");

background-repeat: no-repeat;

float: left;

cursor: hand;

/*border: 1px solid;*/

}

.but1{

width: 14px;

height: 18px;

border-right-width:0px;

background-position: -113px -190px;

}

.but2{

width: 14px;

height: 18px;

border-right-width:0px;

background-position: -113px -126px;

}

.but3{

width: 14px;

height: 18px;

border-right-width:0px;

background-position: 0px -110px;

}

.but4{

width: 14px;

height: 18px;

background-position: -240px -126px;

}

</style>

</head>

<body>

<div class="but1"></div>

<div class="but2"></div>

<div class="but3"></div>

<div class="but4"></div>

</body>

</html>

效果如下：

以DIV1为例来讲解

容器DIV1宽为14px，高为18px，我们要获得向右箭头就需要将其移动到容器内，所以需要图片的原点向左平移113px，再向上平移190px，结合上面坐标轴的概念水平向左为负，垂直向上也为负，所以结果就是-113px -190px；其它三个DIV方法也类似了，归结起来就是把需要的图标移动到容器内，然后根据坐标轴计算平移量就可以了，是不是很简单呀！

3、百分比

百分比的计算方法略显复杂，图片长宽乘以百分比对应的位置和容器长宽乘以百分比对应的位置重叠，如图：

我们可以通过公式来根据像素值计算出百分比： （容器的宽/高度-图片的宽/高度） x 百分比 = 像素值

上图图片我们可以通过百分比的方式把它水平摆放

<html>

<head>

<style>

.but1, .but2, .but3, .but4{

background-image: url("1234.png");

background-repeat: no-repeat;

width: 100px;

height: 100px;

float: left;

}

.but1{

background-position: 0% 0%;

}

.but2{

background-position: 0px 33.33%;

}

.but3{

background-position: 0px 66.66%;

}

.but4{

background-position: 0px 100%;

}

</style>

</head>

<body>

<div class="but1"></div>

<div class="but2"></div>

<div class="but3"></div>

<div class="but4"></div>

</body>

</html>

效果如下：

示例下载：

http://pan.baidu.com/s/12aMz8

CSS背景图片定位的更多相关文章

  1. css背景图片定位练习（二）： background-position的百分比

    background-position:x y; 百分比定位并不能直观的看出来,需要通过计算. background-position百分比计算公式: (容器宽度—背景图片的宽度)*x%=xpx(容器 ...

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

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

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

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

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

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

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

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

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

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

  7. css背景图定位和浮动

    网站图标引入:<link rel="shortcut icon" href="ico图标地址"> 背景图片  background-image: u ...

  8. Bootstrap css背景图片的设置

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

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

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

随机推荐

  1. MTK MOTA升级步骤

    MOTA的前提下有其自己的server,MTK我在已经完成,可以MTK应用,然后移动到它自己的server向上. 1.打开ProjectConfig.mk中间MTK_SYSTEM_UPDATE_SUP ...

  2. iOS开发无第三方控件的援助达到的效果侧边栏

    最近的研究iOS程序侧边栏.渐渐的发现iOS该方案还开始采取风侧边栏格该,QQ,今日头条,Path(Path运营商最早的侧边栏app该,效果说成是Path效果),所以就研究了下. 然后发现Git Hu ...

  3. 它们的定义TextView使之具有跑马灯的效果

    一.引入问题 使用通用textview快乐效应,焦点事件不启动滚动,button目前的焦点事件,但丑,因此,需要定制TextView 天生焦点 个textview FocusedTextView.ja ...

  4. linux安装QQ

    下载链接:WineQQ2013SP6-20140102-Longene 下面步骤一定要依照顺序来,我用的系统是 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  5. Winpcap网络编程十之Winpcap实战,两台主机通过中间主机通信

    注:源码等等的我不会全然公开的,此篇文章写出来为大家的网络编程或者课程设计提供一定的思路.. 好,本次我们须要完毕的任务是: 完毕两台主机通过中间主机的数据通信(网络层) 添加基于IP地址的转发功能 ...

  6. Spring【AOP】

    AOP是OOP的延续,是软件开发中的一个热点. AOP技术,是OOP补充. OOP引入封装.继承和多态建立一种对象层次结构模拟公共行为集合,而对从左到右的关系则显得无能为力.对于AOP则恰恰适应这样的 ...

  7. hdu 1426 Sudoku Killer ( Dancing Link 精确覆盖 )

    利用 Dancing Link 来解数独 详细的能够看    lrj 的训练指南 和 < Dancing Links 在搜索中的应用 >这篇论文 Dancing Link 来求解数独 , ...

  8. dapper的Dapper-Extensions用法（一）

    dapper的Dapper-Extensions用法(一) Dapper-Extensions Dapper Extensions is a small library that complement ...

  9. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布

    [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,或许我们正在阿谀逢迎自己懒惰的天 ...

  10. Codeforces 479E Riding in a Lift(dp)

    题目链接:Codeforces 479E Riding in a Lift 题目大意:有一栋高N层的楼,有个无聊的人在A层,他喜欢玩电梯,每次会做电梯到另外一层.可是这栋楼里有个秘 密实验室在B层,所 ...