的底部。
无论浏览器窗口的大小/分辨率如何，我都想让波浪边框贴在图片的底部，但是调整父div的大小不起作用，也不会将边框设置为top: 100%;。
目标(无论屏幕大小)
像这样，但不管屏幕如何调整
*{
}
body{
background-color:rgb(74,76,81);
}
#welcometoc3 {
position: absolute;
max-width: 700px;
left: 75px;
animation: fadeInAnimation ease 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
font-family: 'gamepixies', 'Josefin Sans', sans-serif;
color: white;
font-size: 125px;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@font-face {
font-family: 'gamepixies';
src: url('/Users/jager/Desktop/dev/dev/Main Projects/Chatting 3 webstie/Chatting 3 webstie/fonts/Gamepixies-8MO6n.ttf') format('truetype');
}
.center-con {
position: relative;
max-width: 200px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
top: 170px;
left: 25%;
}
.round {
position: relative;
border: 3px solid #fff;
width: 100px;
height: 100px;
border-radius: 100%;
}
span {
z-index: 10;
height: 3px;
margin:1px;
width: 30px;
background: rgb(78, 161, 0);
transition: 0.4s ease;
}
span:first-child {
display: block;
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 35%;
}
span:nth-child(2) {
display: block;
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 35%;
}
span:nth-child(3) {
display: block;
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 54%;
}
span:nth-child(4) {
display: block;
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 54%;
}
.round:hover span:nth-child(1) {
transform: rotate(-135deg);
}
.round:hover span:nth-child(2) {
transform: rotate(135deg);
}
.round:hover span:nth-child(3) {
transform: rotate(225deg);
}
.round:hover span:nth-child(4) {
transform: rotate(-225deg);
}
#banner-image {
position: relative;
width: 100%;
clip: (0px,0px,100px,0px);
}
#banner-border {
background-color: rgba(255, 255, 255, 0);
position: absolute;
z-index: 100;
width: 100%;
top: 400px;
}<!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>Chatting 3 Hub</title>
<!--CSS-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mainstyle.css">
</head>
<body style="margin:0;">
<div id="banner-border" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-13.54,39.95 C123.02,106.08 269.74,52.78 500.00,49.98 L501.12,152.45 L0.00,150.00 Z" style="stroke: none; fill: rgb(74,76,81);"></path></svg></div>
<div class="banner">
<img loop=infinite id="banner-image" src="https://i.ibb.co/8PYMxhg/landscape1.gif" alt="balls">
</div>
<div id="welcometoc3" class="fade">Welcome to Chatting 3</div>
<div>
<div class="center-con">
<div class="round">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>*{
padding:0;
margin:0;
}
body{
background-color:red;
}
#banner-image {
position:relative;
width: 100%;
clip: (0px,0px,100px,0px);
bottom: 0;
left: 0;
position: absolute;
}
#banner-border {
background-color: rgba(255, 255, 255, 0);
position: absolute;
z-index: 100;
width: 100%;
bottom: 0;
left: 0;
}
.banner{
position: relative;
height: 100%;
height: 45vh;
}
img{
width: 100%;
height: 300px;
}<div class="banner">
<img loop=infinite id="banner-image" src="https://i.ibb.co/8PYMxhg/landscape1.gif" alt="balls">
<div id="banner-border" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-13.54,39.95 C123.02,106.08 269.74,52.78 500.00,49.98 L501.12,152.45 L0.00,150.00 Z" style="stroke: none; fill: rgb(74,76,81);"></path></svg></div>
</div>
你只需要调整它的大小。据我所知，你不能做一些与img相关的东西因为它不包含结束标签所以你不能在图像里面放东西。你需要把它们放在同一个容器里，并调整它们的位置。