作用:设置背景图片的大小,
语法:background-size:宽度 高度;
取值:
<!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: 400px;height:300px;background-color: pink;background-image: url(./images/1.jpg);/*background-repeat: no-repeat: 即无论背景图片的大小, 只显示单个背景图片*/ background-repeat: no-repeat;/* background-size: 300px; *//* background-size: 50%; *//* 如果图的宽或高与盒子的尺寸相同了, 另一个方向停止缩放 -- 导致盒子可能有留白 */background-size: contain;/* 保证宽或高和盒子尺寸完全相同 , 导致图片显示不全 *//* background-size: cover; *//* 工作中, 图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */}</style>
</head>
<body><div class="box"></div>
</body>
</html>