只有图片可以设置宽度和高度，背景图片可以通过：
background-size:宽度 高度;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
/*第一种背景缩放方式*/
.box1
{
width:500px;
height: 300px;
background: url(image/背景缩放.jpeg);/*no-repeatb*/
box-shadow: 1px 1px 1px #333333;
border:1px solid grey;
border-radius: 10px;
background-size: 600px 600px;
position: relative;
}
.txt1
{
width: 498px;
height:50px;
background:rgba(255,255,255,0.6);
position: absolute;
bottom: 0;
}
/*第二种背景缩放方式*/
.box2
{
width:500px;
height: 300px;
background: url(image/背景缩放.jpeg);
box-shadow: 1px 1px 1px #333333;
border:1px solid grey;
border-radius: 10px;
background-size: cover;/*常用的方式*/
position: relative;
}
.txt2
{
width: 498px;
height:50px;
background:rgba(255,255,255,0.6);
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="txt1">实现效果</div>
</div>
<div class="box2">
<div class="txt2">实现效果</div>
</div>
</body>
</html>
时间： 2024-10-22 06:41:16