CSS背景属性（2）

来源：互联网发布：沉迷网络的坏处编辑：程序博客网时间：2024/06/07 12:22

背景位置属性(background-position)

为了提高Http的请求速度，有时候很多图片都做到一张图片里面，这时候就需要切图，就用到了background-position属性。

这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。

设置或检索对象的背景图像位置。必须先指定 background-image属性。

背景图像的左上角的坐标位置是0,0。

如果要设置left坐标为5px的图片位置，就需要背景图像向左移动5个像素，所以就是-5。

如果要设置top坐标为10px的图片位置，就需要背景图像向上移动10个像素，所以就是-10。

body{     background-image:url(../images/css_tutorials/background.jpg);     background-repeat:no-repeat;     background-position:-5px -10px;}

上面的代码表示背景图片的初始位置距离网页最左面-5px，距离网页最上面-10px。

演示示例

<html><head><title>背景位置属性background-position</title><style type="text/css">body{     background-image:url(../images/css_tutorials/background.jpg);     background-repeat:no-repeat;     background-position:20px 60px;}</style></head><body><p>这个HTML使用了CSS的background-position属性。这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。</p><p>上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。</p></body></html>

背景属性(background)

这个属性是设置背景相关属性的一种快捷的综合写法，包括background-color, background-image,background-repeat, backgroundattachment,background-position。

body {      background:#99FF00url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}

上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。

演示示例

<html><head><title>背景属性background</title><style type="text/css">body {      background:#99FF00url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}</style></head> <body><p>这个属性是设置背景相关属性的一种快捷的综合写法，包括background-color, background-image, background-repeat,backgroundattachment, background-position。</p><p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。</p></body></html>

原文：http://blog.sina.com.cn/s/blog_49bf88fb0100040a.html

0 0