CSS中背景图片位置属性background-position

最新推荐文章于 2024-03-01 11:51:40 发布

波哥的技术积累

最新推荐文章于 2024-03-01 11:51:40 发布

阅读量1.4w

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/woshisap/article/details/8481603

版权

css 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

该属性用来定义元素背景图片的起始位置，在背景图片的背景图片位置属性中，可以使用两种属性值，一种为长度单位，包括长度值

和百分比值；另一种为指定值，包括top, center, bottom, left, righ等，其语法结构如下：

其中部分属性值的含义如下所述：

top: 背景图片的初始位置为元素顶部

center: 背景图片的起始位置为元素中部

left: 背景图片的起始位置为元素左侧

right: 背景图片的起始位置为元素右侧

bottom: 背景图片的起始位置为元素底部

在背景图片位置属性中，属性值一般有2个，前一个代表横向位置，后一个代表纵向位置，使用两个属性值定义背景图片的起始位置，

如果两个方向的起始位置相同，则可以使用一个值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    div {
	  background-position: center top;
	  background-repeat: repeat-y;
	  background-image: url(images/round.jpg);
	  width: 400px;
	  height: 100px;
	}
  </style>
 </head>
 <body>
    <div>这是背景图片位置属性的实例</div>
 </body>
</html>

在以上代码中，定义了背景图片的位置为中间、顶部，同时定义了背景图片为纵向重复。

波哥的技术积累

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中背景图片位置属性background-position

该属性用来定义元素背景图片的起始位置，在背景图片的背景图片位置属性中，可以使用两种属性值，一种为长度单位，包括长度值和百分比值；另一种为指定值，包括top, center, bottom, left, righ等，其语法结构如下： background-position: length | percent | top | center | bottom | left | right
复制链接

扫一扫