background-image
<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: 600px;
height: 600px;
background-color: #f00;
/* 设置背景图片：可以设置多张背景图片 */
background-image: url(../images/kobe01.jpg), url(../images/kobe02.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
background-repeat
图片是否允许平铺，所谓平铺就是当图片不能覆盖整个区域时，继续使用图片去覆盖整个区域，默认是平铺
<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: 600px;
height: 600px;
background-color: #f00;
/* 设置背景图片 */
background-image: url(../images/wall.png);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
background-size
背景尺寸，当图片不允许平铺时，图片不占据整个背景区域时，十分的丑，那么可以设置背景尺寸让图片去适应背景的大小；contain：缩放背景图，当宽度或高度填满背景时，则停止缩放，图片保持原本比例；cover：以完全覆盖背景区域，可能背景图片部分看不见；也可以设置具体的值或者百分比
<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: 600px;
height: 600px;
background-color: #f00;
/* 设置背景图片 */
background-image: url(../images/kobe01.jpg);
background-repeat: no-repeat;
/* 设置背景的尺寸 */
/* background-size: 100% 100%; */
/* background-size: 100px 100px; */
background-size: 100px auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
background-position
用于设置背景图片在水平、垂直方向上的具体位置
可以设置具体的数值 比如 20px 30px;
水平方向还可以设值：left、center、right
垂直方向还可以设值：top、center、bottom
如果只设置了1个方向，另一个方向默认是center
<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: 600px;
height: 600px;
background-color: #f00;
/* 设置背景图片 */
background-image: url(../images/kobe01.jpg);
background-repeat: no-repeat;
/* 背景位置 */
/* background-position: -100px -100px; */
background-position: top;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
background-attachment
background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
可以设置以下3个值
scroll：此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动
local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
<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;
overflow: scroll;
color: #fff;
background-color: #f00;
background-image: url(../images/kobe01.jpg);
/* 附加效果 */
/* background-attachment: scroll; */
/* background-attachment: local; */
/* background-attachment: fixed; */
}
</style>
</head>
<body>
<div class="box">
赏花游人群中，朋友相约出游、全家出游、亲子出游占比较高。同程旅行大数据显示，赏花游对男性和女性游客同样具有吸引力。在关注赏花游的人群中，男性占比为48%，女性占比为52%，几乎持平。在年龄分布上，80后和90后更爱赏花游，00后赏花游客群体增长迅速，占比从去年的5%增至今年的16%。和朋友一起相约赏花，在赏花人群中占比最高，达到36%，带着家人孩子一起外出赏花的游客占比也达到33%。
3月上旬，多地出现散发疫情，赏花长线游市场受到较大影响。
“近两年以来，春季赏花游市场中，周边短途游占比进一步提高，从今年途牛旅游网预订情况看，超七成游客选择周末周边游。疫情发生前，每年春季，江西婺源、西藏林芝等地跟团游中，外省游客占比较大，今年，在跨省游受限的情况下，赏花长线游产品受影响较大。”途牛旅游相关负责人告诉记者。
驴妈妈旅游网首席执行官邹庆龄说：“今年赏花游目的地更偏向省内、当地，其次是周边省市。从玩法上来看，赏花游产品呈现高频化、深度打卡、网红内容体验等特点；行程设计由单纯的赏花到品农家菜、入住当地酒店及特色民宿，赏花游呈现慢节奏体验的趋势。”
</div>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
</body>
</html>
