位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用：CSS 对齐
当前阅读教程：CSS入门到精通 > background-position 背景图像定位
阅读(22555525)      收藏       赞(5685)      分享
上一篇： background-attachment 属性 下一篇： CSS Text(文本)

标签定义及使用说明

background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）".

默认值:

0% 0%

继承:

no

版本:

CSS1

JavaScript 语法:

object   object.style.backgroundPosition="center"

 

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

image.png

注意: IE8 及更早的浏览器版本不支持一个元素有多个背景图片。

属性值

值

描述

left top
  left center
  left bottom
  right top
  right center
  right bottom
  center top
  center center
  center bottom

如果仅指定一个关键字，其他值将会是"center"

x% y%

第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％

xpos   ypos

第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions

inherit

指定background-position属性设置应该从父元素继承

示例

小白教程网www.2d5.net

设定背景图片居中，不会随下拉的改变而改变

代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>background-position 背景图像定位</title>

<!--定义内部样式-->

<style>

     /*定义整个页面固定的背景图片*/

     body{

             /*定义页面背景图片，默认是平铺*/

         background-image:url("img/bg.gif");

             /*设定背景图片不重复，也就是只显示1张*/

             background-repeat: no-repeat;

             /*设定背景图片固定*/

             background-attachment: fixed;

             /*设定背景图片位置：居中*/

         background-position: center;

             /*

             可以使用下面语句：使用％设置页面上的图像位置

             background-position: 30% 20%;

             可以使用下面语句：使用像素设置页面上的图像位置

             background-position: 50px 100px;

             */

     }

</style>    

</head>

<body>

     <!--定义多行文本；下来查看背景的效果-->

     <p>01.背景图片是固定的。尝试向下滚动页面。</p>

     <p>02.背景图片是固定的。尝试向下滚动页面。</p>

     <p>03.背景图片是固定的。尝试向下滚动页面。</p>

     <p>04.背景图片是固定的。尝试向下滚动页面。</p>

     <p>05.背景图片是固定的。尝试向下滚动页面。</p>

     <p>06.背景图片是固定的。尝试向下滚动页面。</p>

     <p>07.背景图片是固定的。尝试向下滚动页面。</p>

     <p>08.背景图片是固定的。尝试向下滚动页面。</p>

     <p>09.背景图片是固定的。尝试向下滚动页面。</p>

</body>

</html>

效果图

小白教程网www.2d5.net

image.png
上一篇： background-attachment 属性 下一篇： CSS Text(文本)
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ：45157718(微信同号)（备注：毕设）