老师，为什么我的兔子图片显示不出来？
来源：2-14 项目作业
慕妹6205103
2020-06-08 16:00:07
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 蓝天 -->
<div class="sky">
<!-- 白云 -->
<div class="cloud one"></div>
<div class="cloud two"></div>
<div class="cloud three"></div>
<div class="cloud four"></div>
<div class="cloud five"></div>
</div>
<div class="lawn"></div>
</body>
</html>
body,html{
width: 100%;
height: 100%;
overflow: hidden;
}
.sky{
width: 100%;
height: 400px;
background: linear-gradient(rgb(196, 228, 253) 0%,#fff 100%);
}
.sky > .cloud{
width: 170px;
height: 50px;
background: #ffffff;
border-radius: 25px;
position: relative;
z-index: 0;
}
.sky > .cloud:before{
content: '';
width: 100px;
height: 50px;
background: #ffffff;
border-radius: 25px;
position: absolute;
top: 0;
left: 0;
transform: rotate(60deg);
z-index: 1;
}
.sky > .cloud:after{
content: '';
width: 100px;
height: 100px;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: -40px;
left: 50px;
z-index: 1;
}
.sky > .one{
transform: translate(70px,70px) scale(.9);
opacity: .8;
}
.sky > .two{
transform: translate(130px,-20px) scale(.8);
opacity: .7;
}
.sky > .three{
transform: translate(130px,60px) scale(.8);
opacity: .7;
}
.sky > .four{
transform: translate(500px,-80px) scale(.7);
opacity: .6;
}
.sky > .five{
transform: translate(550px,-40px) scale(.6);
opacity: .5;
}
.lawn{
width: 100%;
height: 267px;
background: linear-gradient(0deg,rgb(148, 190, 89) 0%,#fff 100%);
position: relative;
z-index: 2;
}
.lawn:after{
content: '';
width: 200px;
height: 200px;
background: url(images/rabbit.png);
position: absolute;
right: 100px;
bottom:30px;
z-index: 3;
}
1回答
-
好帮手慕星星
2020-06-08
同学你好，小兔子图片默认尺寸太大了
所以显示不出来，还需要使用背景图片大小属性设置。参考
效果
自己再测试下，祝学习愉快！
0
相似问题