概述
background-position 用来设置背景图像起始位置的CSS样式属性
| |
|–|–|
| | |
属性
使用值
| 值 | 描述 |
|---|---|
| x轴：left right center | 默认值： left top |
| y轴：top bottom center | 可以使用两个值，也可以使用一个值，当使用一个值另一个默认为center |
使用百分比
| 值 | 描述 |
|---|---|
| x% y% | 第一个值是水平位置，第二个值是垂直位置。 |
css——backgroud-position控制背景图位置
例子代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图position设置图片位置</title>
<style>
.card{
display: inline-block;
padding: 8px;
height: 400px;
width: 600px;
border: 1px solid #efefef;
margin: 0 30px;
background-color: #efefef;
background-repeat: no-repeat;
/*
使用background-position 来设置背景图像的位置
x轴：left right center
y轴: top bottom center
默认值： left top
可以使用两个值，也可以使用一个值，当使用一个值另一个默认为center
*/
background-position: right center;
background-position: right bottom;
background-position: center;
}
.card1{
background-image: url('image/1.jpg');
}
.card2{
background-image: url('image/2.jpg');
}
</style>
</head>
<body>
<h1>设置图片位置</h1>
<div class="card card1">
</div>
<div class="card card2">
</div>
</body>
</html>
