使用方法:
background-position: x y;
原点是左上角
x是横坐标(从左到右)
y是纵坐标(从上到下)
百分比写法:
0% 50% 100% x left center right y top center bottom
参数值 | 说明 |
---|---|
length | 百分数 | 由像素等长度单位表示的长度值 |
position | top | center | bottom | right |
两种参数可以混着写
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
background-color: #ccc;
background-image: url(./images/logo.png);
background-repeat: no-repeat;
/* 使用背景图片可以更方便控制图片的位置 */
/* 1. 方位名词 上下左右中 */
/* background-position: top center; */
/* 这两个值没有先后顺序,建议第一个写水平方向第二写垂直方向 */
/* background-position: center top; */
/* 不建议省略 如果只写一个值另外一个默认是center */
/* background-position: top; */
/* background-position: center bottom; */
/* 2.精确单位 第一个值代表x方向 第二值代表y方向*/
/* background-position: 60px 80px; */
/* 3.方位名字和精确单位混用 */
background-position: center 50px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>