background-position的用法

最新推荐文章于 2024-09-23 11:30:11 发布

静山晚风

最新推荐文章于 2024-09-23 11:30:11 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html-Css

本文链接：https://blog.youkuaiyun.com/cgwcgw_/article/details/12704703

Html-Css 专栏收录该内容

51 篇文章

订阅专栏

本文介绍如何使用CSS来精确地定位背景图像的位置。通过不同的属性值组合，如top、right、bottom、left及百分比，可以实现背景图片在元素中的精确定位。文中展示了五个实例，每个实例都使用了不同的background-position属性值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>设置背景图像位置</title>
<style type="text/css">
.box
{
	height:70px;
	margin-top:10px;
	border:1px solid red;
	background-image:url("photo.gif");
	background-repeat:no-repeat;
}
#id1
{
background-position:top right;
}
#id2
{
background-position:bottom center;
}
#id3
{
background-position:center center;
}
#id4
{
background-position:left 50%;
}
#id5
{
background-position:30px 20%;
}
</style>
</head>
<body>
<div class="box" id="id1"></div>
<div class="box" id="id2"></div>
<div class="box" id="id3"></div>
<div class="box" id="id4"></div>
<div class="box" id="id5"></div>
</body>
</html>