CSS背景属性（2）

最新推荐文章于 2023-06-30 11:05:47 发布

whyabc

最新推荐文章于 2023-06-30 11:05:47 发布

阅读量718

点赞数

分类专栏： css

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

背景位置属性(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

whyabc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS背景属性（2）

背景位置属性(background-position) 为了提高Http的请求速度，有时候很多图片都做到一张图片里面，这时候就需要切图，就用到了background-position属性。这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。body{ background-image:url(../images/css_tutorials/
复制链接

扫一扫