Question

当我在浏览器中运行我的代码时，背景正是我已经想要的背景，问题是我仍然可以向下滚动，显示最初隐藏的背景部分。我需要它，以便我试图输入的图片不会从页面上掉下来，并且不再显示背景。这是我的代码（抱歉，我知道它很草率）：

<!DOCTYPE html>
<html>
<head>
<title>XXX</title>
<meta charset="utf-8" />
<style>
    body {
        background-image:url("Images/Background2.png");
        background-size: cover;
            background-repeat: no-repeat;
}
    .cf img.bottom:hover {
        opacity:0;
        overflow:hidden;
}

    #container1 {
        position:relevant;
}
    #positioning {
            position:absolute;
        Top:500px;
        Left:500px;
        Width:1000px;
        Height:600px;
        overflow:hidden;
}
</style>

</head>
<body>
    <IMG STYLE="position:absolute; TOP:38px; LEFT:90px; WIDTH:220px; HEIGHT:25px" SRC="Images\Logo.png" border:"0" draggable="false" style="-moz-user-select: none;">
        <div class="cf">
            <img class="top" IMG STYLE="position:absolute; TOP:255px; LEFT:106px; WIDTH:140px; HEIGHT:26px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Contact_001.png" border:"0" draggable="false" style="-moz-user-select: none;">
            <img class="bottom" IMG STYLE="position:absolute; TOP:255px; LEFT:106px; WIDTH:140px; HEIGHT:26px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Contact_002.png" border:"0" draggable="false" style="-moz-user-select: none;">
            <img class="top" IMG STYLE="position:absolute; TOP:355px; LEFT:105px; WIDTH:120px; HEIGHT:25px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\About_001.png" border:"0" draggable="false" style="-moz-user-select: none;">
            <img class="bottom" IMG STYLE="position:absolute; TOP:355px; LEFT:105px; WIDTH:120px; HEIGHT:25px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\About_002.png" border:"0" draggable="false" style="-moz-user-select: none;">
            <img class="top" IMG STYLE="position:absolute; TOP:455px; LEFT:108px; WIDTH:100px; HEIGHT:24px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Work_001.png" border:"0" draggable="false" style="-moz-user-select: none;">
            <img class="bottom" IMG STYLE="position:absolute; TOP:455px; LEFT:108px; WIDTH:100px; HEIGHT:24px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Work_002.png" border:"0" draggable="false" style="-moz-user-select: none;">
            <img class="top" IMG STYLE="position:absolute; TOP:555px; LEFT:115px; WIDTH:280px; HEIGHT:30px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\WTU_001.png" border:"0" draggable="false" style="-moz-user-select: none;">
            <img class="bottom" IMG STYLE="position:absolute; TOP:555px; LEFT:115px; WIDTH:280px; HEIGHT:30px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\WTU_002.png" border:"0" draggable="false" style="-moz-user-select: none;">
        </div>

            <div id="container1">
                <div id="positioning">
                     <img class="bottom" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Photoshop1.png">
     </div>
 </div>
 </body>
 </html>

我根本没有使用样式表，提前感谢任何寻求帮助的人。

Answer 1

请尝试

body { 
       overflow-x: hidden;
       overflow-y: hidden;
     }

Answer 2

尝试

html, body {
  height: 100%;
}
body {
  overflow: hidden;
}
#positioning {
  max-height: 100%;
}

溢出：隐藏不起作用

2 个答案: