此页面上的内容需要较新版本的 Adobe Flash Player。

获取 Adobe Flash Player

魔快网络 - 建高品质的网站!
电话:(0)15011022561 苏玮
QQ:476289485
MSN:[email protected]
魔快网络:建最优品质的网站 公司建网站,公司做网站,公司网站建设,网页设计、制作。技术支持电话:15011022561

首页->利用CSS定位背景图片 background-position 一张图 css 定位 div

利用CSS定位背景图片 background-position

代码:div{ background:#FFF url(image) no-repeat fixed x y;}

这里的background的属性值依次为:

#FFF 背景色:(颜色值,背景图片没有覆盖的地方,或者没有背景图片时表现的背景色)
image 背景图片:(这里是图片的地址)
no-repeat 是否重复:(图片小于容器的大小时,默认会重复排列图片以填满容器,no-repeat表示不重复,只有这个时候后面的定位坐标才有用。)
fixed 背景是否随容器滚动:(有两个可选值,scroll滚动,fixed不滚动,默认是scroll)
x y 背景图像的定位:(注意,只有在no-repeat下定位才有意义。这个就是今天要讲的重点)

背景图像定位中我们要明确的几点:

1、两个值前面一个是横向的定位,我们称为x轴方向定位。后面一个值是纵向的定位,我们称为y轴方向定位。如果只有一个值,那默认的就是x轴方向,这时y轴方向就默认的是上下居中对齐,也就是center。
2、坐标轴的原点就是对应容器的左顶点。
3、这个坐标的y轴箭头朝下,也就是右下方(容器内部)x y的值才都为正。
4、x y值分别表示背景图片的左顶点相对于坐标原点(也就是容器的左顶点)的值。
5、x y的值可以用百分比或者px来表示。
6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示,但注意:用“left、right、top、bottom、center”来表示的时候,应用的是对齐规则,而不是坐标规则。x为left是表示图片的左边和容器的左边对齐,为right的时候表示图片的右边和容器的右边对其,y为top的时候表示图片的顶部和容器的顶部对齐,为bottom时表示图片的底部和容器的底部对齐,x y等于center的时候表示居中对齐。
7、x y用百分比或者px表示的时候,其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义,x为负数时候表示图片左顶点在容器左顶点的左侧,y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。

在google中搜索一下css sprites这个名称,会查出很多信息,并且随着SEO越来越被人们重视,采用这种技术来进行图片优化的网站越来越多,国内几家大型门户网站无不仿效。如新浪,网易,搜狐。你下载一下他们的网站上的图片,你会看到他们将很多小图片全部集成在一张图片上

这样做的好处是不言而语:

  1. 加速图片显示
  2. 利用CSS技巧减小HTTP请求
  3. 利于网站优化seo

其实原理非常简单,主要是应用css中的背景定位技术来实现的。主要就是用一个属性background-position来控制显示一张大图片中的一个指定大小的图片位置。

css sprites图片背景优化技术

下面从一个比较有趣的例子来一步步动手制作一幅扑克牌,看看是如何定位图片的。

首先我们分析一下扑克牌,一幅扑克牌有两种颜色,有四种图案黑桃、红心、梅花、方块。另外有J,Q,K,这三种是花牌。A~10中只用到四种图案,而三种花牌用到三张图片,而它们的位置是不同的,但归纳起来就只有几种变化,如A—7这是一种变化,它是三行三列的布局(A和2是它的特例),8—10就一种,它是四行三列。J,Q,K是一种(其实它也是第一种的变种特例)。
知道了原理就好办了,我们先做出它们的图片来,一张一张来,黑桃、红心、梅花、方块大图各一张,小图各一张,J,Q,K图案各一张,背景图一张。

另外要做全部的数字图片13张,270度翻转的图片13张。

好了,所有的图片准备齐了,共有71张图片,嘿嘿,有点吓人,这么多图片,没想到吧(以后会介绍一个比较省事的做法,不用图片,先卖个关子,有点)

要注意的是每一张牌下部分的内容与上部分是垂直翻转的,这也是为什么将数字也做成图片的原因。

在组合这张图片要注意的是,每一张图都是完整的,不能被其它图片重叠,并且要精确计算好每个图片的坐标位置,比如它的左上角顶点坐标,和右下角顶点坐标,知道这两个坐标点后,每一张小图片的位置就能全部计算出来了。

样例:

<div style="width:20px;height:25px;background: #fff url(web/UploadPic/2009-5/200951619265814.png); background-repeat: repeat-x; background-position: -455px -355px"></div>

<div style="background:url(fdsa.jpg) no-repeat 10px 20px; width:10px; height:10px; "></div>
这个的意思就是在这个宽和高都为10的容器里面,显示的背景是你文件名为1.jpg的背景图当中的一部分,具体哪一部分,是从左边10px上面20px开始到哪里结束?到距离左边20px上面30px结束?为什么?因为容器的宽和高都是10px

关闭窗口   

·[远程桌面控制]错误: 拒绝访问
·[菜单制作]css+js下拉菜单
·[定时关机命令]定时关机命令
·[远程桌面控制]远程桌面控制与IIS设置
·[导航菜单]横向导航菜单 2009-1-25
·[搜索引擎优化] 网站优化-url优化
·[网络营销方法] SEO讲座:关键词布局技巧
成品[朝阳区]
信诚威|白洋淀旅游|泛亚西亚|北京隆腾展具制作|祥威胜|优仕配音|诚灵纺织|国顺广告材料|魅力星光文化|北京朝阳做网站|rpglobalservices|北京建网站|vaiprachina|新彩福明广告
北京魔快网络公司 建高品质的网站! 顺义做网站分部
©2002- 电话:010-69440493 15011022561(苏先生) QQ:476289485 Email:[email protected]
地址:北京东城区工体北路新中西里17号楼北边平房(保利剧院东100米路北) 北京做网站找魔快,建站快、优化好!MoKuai.Net 京ICP备05048557号