在 CSS 中设置背景位置

cssweb developmentfront end technology更新于 2025/1/14 14:36:17

CSS background-position 属性用于设置背景图像相对于原点的初始位置。

语法

CSS background-position 属性的语法如下 −

Selector {
   background-position: /*value*/
}

以下示例说明了 CSS background-position 属性 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 30px;
   padding: 100px;
   background-image: url("https://www.cainiaomax.com/images/C-programming.png"), url("https://www.cainiaomax.com/images/Swift.png"), url("https://www.cainiaomax.com/images/xamarian.png");
   background-repeat: no-repeat;
   background-position: 15% 20%, top, right;
   border: 1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 20px;
   padding: 80px;
   background-image: url("https://www.cainiaomax.com/images/dbms.png"), url("https://www.cainiaomax.com/images/Operating-System.png");
   background-repeat: no-repeat;
   background-position: 0 0, bottom right;
   background-color: lemonchiffon;
}
</style>
</head>
<body>
<p>This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. </p>
</body>
</html>