Question

固定：忘记关闭DIVS，我的坏事 当向下滚动时，我在使图像保持原位方面遇到很大的麻烦，当网页的用户向下滚动时，它会离开屏幕。我尝试过的解决方案是将图像位置设置为报复，绝对和调整大小，这是我当前的代码。

<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link rel="stylesheet" href="baseofcasestudies.css"/>
</head>
<body>

function openSlideMenu(){
document.getElementById('slide-menu').style.width = '250px';
}

function closeSlideMenu(){
document.getElementById('slide-menu').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}

body{
font-family: "Arial", Serif;
overflow-y: visible;
width: 1024px;
height: 1200px;
background-attachment: absolute;
}
.side-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a{
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
display: block;
color: #ccc;
transition: 0.3s;
}
.side-nav a:hover{
color: #fff;
}
.navbar{
position: fixed;
top: 10;
left: 10;
z-index: 1;
}
#myVideo{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%; 
min-height: 100%;
z-index: -50;
}
.Tri{
position: absolute;
transform: rotate(-270deg);
transition: all 0.4s ease-in-out;
z-index: 5;
margin-top: 250;
margin-left: 300;
}
.Tri:hover{
transform: rotate(-180deg);
}
.data{
position: absolute;
opacity: 0.5;
height: 1200px;
width: 1200px;
transform: translate(25%, 5%);
}
.titleofstudy{
position: absolute;
left: 75%;
margin-right: -50%;
transform: translate(-50%, -20%);
font-size: 70px;
color: white;
}
html css image jpeg

<video autoplay muted loop id="myVideo">
      <source src="background2.mp4" type="video/mp4">
    </video>
    <nav class="navbar">
    <span class="open-slide">
    <a herf="#" onclick="openSlideMenu()">
    <svg width="30" height="30">
    <path d="M0,5 30,5" stroke="#000"
    stroke-width="5"/>
    <path d="M0,14 30,14" stroke="#000"
    stroke-width="5"/>
    <path d="M0,23 30,23" stroke="#000"
    stroke-width="5"/>
    </svg>
    </a>
    </span>


    <div id="slide-menu" class="side-nav">
    <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
    <li><a href="home.html">Home</a></li>
    <li><a href="#">home</a></li>
    <li><a href="#">home</a></li>
    <li><a href="#">home</a></li>
    <li><a href="#">home</a></li>
    <li><a href="contact.html">Contact</a></li>
    </div>
    
    <div class="Tri" onclick="openSlideMenu()">
    <svg height="30" width="30">
    <polygon points="8.3,2 3.3,13.3 13.3,13.3"             
    style="fill:black;stroke:none;stroke-width:0" />
    </svg>
    </div>
    <p class="titleofstudy">Case Study Name</p>
    </div>
    <img src="black.jpg" class="data">

</body>
</html>

和我的CSS。

html{
}
body{
font-family: "Arial", Serif;
overflow-y: visible;
width: 1024px;
height: 1200px;
background-attachment: absolute;
}
.side-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a{
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
display: block;
color: #ccc;
transition: 0.3s;
}
.side-nav a:hover{
color: #fff;
}
.navbar{
position: fixed;
top: 10;
left: 10;
z-index: 1;
}
#myVideo{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%; 
min-height: 100%;
z-index: -50;
}
.Tri{
position: absolute;
transform: rotate(-270deg);
transition: all 0.4s ease-in-out;
z-index: 5;
margin-top: 250;
margin-left: 300;
}
.Tri:hover{
transform: rotate(-180deg);
}
.data{
position: absolute;
opacity: 0.5;
height: 1200px;
width: 1200px;
transform: translate(25%, 5%);
}
.titleofstudy{
position: absolute;
left: 75%;
margin-right: -50%;
transform: translate(-50%, -20%);
font-size: 70px;
color: white;
}

滚动时图像跟随屏幕

0 个答案: