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

标签定义及使用说明

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

注意对于这个工作在FirefoxOperabackground-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(微信同号)