您的位置:首页> 前端教程> CSS教程
文章导航

CSS background-position

2019-11-22 23:21| 作者: admin| 查看: 611| 评论: 0|来自: 蚂蚁部落

背景图片可以有效的提高页面的美观度或者实用性。

但是,绝大多数背景图片的默认位置并不能满足实际需求。

所以需要对其进行精确控制,background-position属性可以达成此目的。

一.背景图片坐标系:

任何位置的变化,都需要在一个坐标系中进行计量。

控制背景图片的位置当然也不例外,看如下图示:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/232142pju3aaaxjeja4ack.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述坐标系分析如下:

(1).坐标系水平向左是X轴正方向。

(2).坐标系垂直向下是Y轴正方向。

(3).左上角是坐标系的原点位置。

原点默认位置位于border-box区域的左上角,通过background-origin属性可以修改。

坐标系原点位置图示如下:

aid[3667]

关于background-origin属性具体可以参阅CSS background-origin一章节。

二.语法分析:

下面开始介绍background-position属性的应用语法。

[CSS] 纯文本查看 复制代码
background-position : length || position

属性值解析:

(1).length :<percentage> | <length>。

(2).position :top | center | bottom | left | center | right。

          top:背景图像在垂直方向,从顶部开始绘制。

          bottom:背景图像在垂直方向,从底部开始绘制。

          left:背景图像在水平方向,从左边开始绘制。

          center:背景图像水平和垂直方向上居中。

          right:背景图像在水平方向上,从右边开始绘制。

如果该属性提供两个属性值,第一个用于横坐标,第二个用于纵坐标。

如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。

三.代码实例演示:

为了清晰的演示background-position属性的定位效果,以下面图片作为背景:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/232326rn15ysy54kknyn4p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述图片进行一下说明:

(1).每一个单元格的尺寸是100x30。

(2).为了便于演示,不去计较单元格之间空隙所造成的误差。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div{
  background-color:#ccc;
  background-image:url(demo/CSS/img/position.png);
  background-repeat:no-repeat;
  margin:0px auto;
  width:400px;
  height:200px;
}
.position{
  background-position:0px 0px;
} 
</style>
</head>
<body>
  <div class="position"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/232414gpkl68pkg16qsqhp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码进行简单分析:

(1).规定背景图片位置为background-position:0px 0px。

(2).所以背景图片从坐标系的原点位置开始绘制。

(3).背景图片位于左上角。

再强调一下,关于原点位置可以参阅CSS background-origin一章节。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div{
  background-color:#ccc;
  background-image:url(demo/CSS/img/position.png);
  background-repeat:no-repeat;
  margin:0px auto;
  width:400px;
  height:200px;
}
.position{
  background-position:0px -30px;
} 
</style>
</head>
<body>
  <div class="position"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/232513pakwagjo14a2ygrd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码进行简单分析:

(1).规定背景图片位置为background-position:0px -30px。

(2).Y轴坐标值设置为负值,将背景图片在Y轴上从原点向上移动30px。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div{
  background-color:#ccc;
  background-image:url(demo/CSS/img/position.png);
  background-repeat:no-repeat;
  margin:0px auto;
  width:400px;
  height:200px;
}
.position{
  background-position:-100px 0px;
} 
</style>
</head>
<body>
  <div class="position"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/232539hw130lugcgbw5zeg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码进行简单分析:

(1).规定背景图片位置为background-position:-100px 0px。

(2).X轴坐标值设置为负值,是将图片从原点向左移动100px。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div{
  background-color:#ccc;
  background-image:url(demo/CSS/img/position.png);
  background-repeat:no-repeat;
  margin:0px auto;
  width:400px;
  height:200px;
}
.position{
  background-position:-100px -30px;
} 
</style>
</head>
<body>
  <div class="position"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/232605kt5qkg33txmq3tmq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码进行简单分析:

(1).规定背景图片位置为background-position:-100px -30px。

(2).X轴和y轴坐标值设置为负值,将图片从原点向左和向上移动100px和30px。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部