CSS background-position
属性
背景图片大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<div>, initial-scale=1.0">
<title>Document</title>
<style>
body{height: 500px;}
div{width: 200px;height: 1000px;background-color: brown;background-image: url(https://scpic.chinaz.net/Files/pic/pic9/202007/apic26703_s.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-attachment: scroll;}
</style>
</head>
<body>
<div>
</div>
</body>
</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>Document</title>
<style>
#div1{width: 1366px;height: 768px;background: url(https://scpic1.chinaz.net/Files/pic/pic9/202011/apic29290_s.jpg);background-attachment: fixed;border-style: dotted;border-color: blue;border-width: 10px;}
#div2{width: 1366px;height: 768px;background:url(https://scpic.chinaz.net/Files/pic/pic9/202011/bpic21782_s.jpg);background-attachment: fixed;border-right-color: brown;}
#div3{width: 1366px;height: 768px;background:url(https://scpic.chinaz.net/Files/pic/pic9/201803/zzpic11051_s.jpg);background-attachment: fixed;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</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>Document</title>
<style>
#div1{height: 750px;background: url(https://scpic1.chinaz.net/Files/pic/pic9/202011/apic29290_s.jpg);background-attachment: fixed;border-style: dotted;border-color: blue;border-width: 10px;background-repeat: no-repeat;background-position: center;
background-size: contain;}
#div2{height: 768px;background:url(https://scpic.chinaz.net/Files/pic/pic9/202011/bpic21782_s.jpg);background-attachment: fixed;border-right-color: brown;background-repeat: no-repeat;background-position: center;
background-size: contain;}
#div3{height: 768px;background:url(https://scpic.chinaz.net/Files/pic/pic9/201803/zzpic11051_s.jpg);background-attachment: fixed;background-repeat: no-repeat;background-position: center;
background-size: contain;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</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>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box{
width: 500px;
height: 1000px;
background: yellow;
margin: 0 auto;
}
body{
background-image: url(http://www.leawo.cn/attachment/201310/18/1433365_1382072819epuQ.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景的复合属性
1.用空格隔开
2.顺序可以换
3.可以只取一个值,放在后面能覆盖前面的值
4.background-size属性只能单独用
3.可以只取一个值,放在后面能覆盖前面的值(案例)
<!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>
.box{
width: 300px;
height: 300px;
background-color: yellow;
background: url(http://www.leawo.cn/attachment/201310/18/1433365_1382072819epuQ.jpg) center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
可以看出背景颜色并没有显示,在复合样式中没写,默认为白色