目录
一、CSS的背景
设置背景颜色、背景图片、背景平铺见CSS篇十——（1）
4. 背景图片位置
利用backgorund-position属性可以改变图片在背景中的位置。
background-position: x y;
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数 | 由浮点数和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
4.1 参数是方位名词
4.1.1 使用方式
background-position: 方位名词; /* 跟顺序无关 */
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，如left top和top left 效果一致。
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
代码示例：
<!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>CSS背景之背景位置——方位名词</title>
<style>
div {
width: 400px;
height: 400px;
background-color: steelblue;
background-image: url(images/hao123.png);
/* background-position: 方位名词; 跟顺序无关 */
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.1.2 背景位置案例
案例一
HTML代码部分：
<!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>小米IoT开发者平台</title>
<link rel="stylesheet" href="style_demo1.css">
</head>
<body>
<h3>小米IoT开发者平台</h3>
</body>
</html>
CSS代码示例：
h3 {
width: 169.96px;
height: 64px;
line-height: 64px;
font-weight: 400;
font-size: 16px;
background-image: url(images/xiaomi.png);
background-repeat: no-repeat;
background-position: left center;
text-indent: 2em;
}
案例二
HTML代码部分：
<!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>王者荣耀案例</title>
<link rel="stylesheet" href="style_demo2.css">
</head>
<body>
<div></div>
</body>
</html>
CSS代码部分：
div {
width: 100%;
height: 1300px;
background-image: url(images/wangzhe.png);
background-repeat: no-repeat;
background-position: top center;
}
4.2 参数是精确单位
4.2.1 使用方式
background-position: 100px 180px;
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
- 如果只指定一个数值，那该么数值一定是x坐标，另一个默认垂直居中
<!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>背景位置-精确单位</title>
<style>
div {
width: 400px;
height: 300px;
background-color: steelblue;
background-image: url(images/xiaomi.png);
background-repeat: no-repeat;
/* x轴一定是100 y轴一定是180 不能换顺序 */
background-position: 100px 180px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.3 参数是混合单位
4.3.1 使用方式
background-position: 100px center;
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
代码示例：
<!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>背景位置-混合单位</title>
<style>
div {
width: 400px;
height: 300px;
background-color: steelblue;
background-image: url(images/xiaomi.png);
background-repeat: no-repeat;
/* x轴一定是100 y轴一定是180 不能换顺序 */
/* background-position: 100px 180px; */
/* x轴一定是100 y轴是center */
/* background-position: 100px center; */
/* x轴是center y轴是60 */
background-position: center 60px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
