<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{
position: relative;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
width: 700px;
height: 400px;
background-image: url(../images/sed.jpg);
border: 5px solid rgb(255, 200, 0);
}
.two{
position: absolute;
z-index: 1;
opacity: 0;
width: 100px;
height: 100px;
top: 190px;
right: 250px;
background-repeat: no-repeat;
background-image: url(../images/arr.png);
}
.three{
position: absolute;
z-index: 1;
opacity: 0;
width: 700px;
height: 400px;
background-color: black;
}
.two:hover{
opacity: 1;
}
.three:hover{
opacity: 0.6;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>11.21作业
最新推荐文章于 2024-10-17 09:19:08 发布
扫一扫
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
