视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
background-position属性怎么用
2020-11-02 22:14:14 责编:小采
文档
 background-position属性是用于设置背景图像的起始位置的。下面本篇文章就来带大家认识一下background-position属性,希望对大家有所帮助。

CSS background-position属性

作用:设置背景图像的起始位置。

说明:该background-position属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

语法:

background-position: x y;

x表示水平位置,y表示垂直位置;x和y有多种赋值方式,下面我们来看看x,y可能的值:

描述
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

注:需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

CSS background-position属性的使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body
{ 
	background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center 50px; 
}
</style>
</head>

<body>

</body>
</html>

效果图:

下载本文
显示全文
专题