<!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: 600px;
height: 600px;
/* 背景颜色background-color*/
background-color: rgb(0, 255, 255,0.3);
/* 背景图片background-image: url(路径)*/
background-image: url(../image/靓女.jpg);
/* 背景平铺background-repeat:默认平铺repeat,不平铺:no-repeat,repeat-x,repeat-y */
background-repeat: no-repeat;
/* 背景位置background-positi:水平方向位置 垂直方向位置 */
background-position: center center;
/* 属性连写: */
background: rgb(0, 255, 255,0.3) url(../image/靓女.jpg) no-repeat center center;
/* 背景图片大小background-size: 宽度 高度,可以加数字或百分比 */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行示例: