html/css中的溢出图像？_Html_Css

html/css中的溢出图像？

html css

html/css中的溢出图像？,html,css,Html,Css,在窗口屏幕上，一切正常，但响应的大小，我的图像溢出的html。我将图像设置为parallex的div背景；我如何修理溢流面？我工作超过4小时，请帮忙 <!DOCTYPE html> <html lang="en"> <head> <meta charset="Utf-8"> <meta name="viewport" content="width-device-width, initial-scal

在窗口屏幕上，一切正常，但响应的大小，我的图像溢出的html。我将图像设置为parallex的div背景；我如何修理溢流面？我工作超过4小时，请帮忙

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="Utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>WonderWoman</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
        <style>

        </style>
    </head>

    <body>
        <div class="rellax hero-image" data-rellax-speed="0"></div>
        <div class=" rellax parallax-el" data-rellax-speed="-1"></div>
        <div class="rellax logo" data-rellax-speed="12"></div>
        <div class="rellax wonder" data-rellax-speed="7"></div>
        <div class="rellax woman" data-rellax-speed="5"></div>

        <div class="rellax clouds" data-rellax-speed="0"></div>


    </body>
</html>

在较小的屏幕上使用

左：0

。

您似乎没有使用您在任何容器中定义的css类抱歉，我是新来的，我添加了其他代码。您尝试设置

溢出：隐藏？你只是想隐藏溢出的内容吗？它可以使女性img向左移动，但仍有空间尝试display:block
 html , body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background:#fff;
    overflow-x: hidden;
    overflow: hidden;
    scroll-behavior: smooth;

}

.bg-light {
    background: none !important;


}
.navbar{
    z-index: 1000;
}
.navbar-brand {
    margin-left: 25px;
    margin-top: 25px;
}
.navbar-nav a{
    color: white !important;
    letter-spacing: 1px;
    padding: 1px;
    margin-right: 30px;
}

.hero-image{
    width: 100%;
    background: url(backg.jpg) no-repeat 50% 50%;
    height: 100vh;
    background-size: cover;
    position: absolute;
    z-index: 0;


}

.parallax-el {
    background: url(woman.png) no-repeat 50% 50%;
    background-size: contain;
    position: absolute;
    width: 100%;
    height: 100%;
  left:30%;
   z-index: 2;
   overflow: hidden;

}

.logo {
    background: url(wlogo.png) no-repeat 50% 50%;
    background-size: contain;
    width: 100%;
    height: 40%;
    position: absolute;
    top:42%;
    z-index: 1;

}

.clouds {
    width: 100%;
    background: url(sparkle.png) no-repeat 50% 50%;
    height: 100vh;
    background-size: cover;
    position: absolute;
    z-index: 3;
    opacity: 0.3;

}
.whitespace{
    width: 100%;
    height: 100vh;
}
.content {
    background: #fff;
    height: 100vh;
    width: 100%;
    margin: 0 auto;
    padding: 80px 0;
    font-family:Arial, Helvetica, sans-serif;
    height: 100vh;
    position: absolute;
    z-index:1000;

}

.wonder{
    background: url(wondertext.png) no-repeat 50% 50%;
    background-size: contain;
    width: 25%;
    height: 100%;
    position: absolute;
     left: 33%;
    top:5%;
    z-index: 1;

}

.woman{
    background: url(WOMANtext.png) no-repeat 50% 50%;
    background-size: contain;
    width: 30%;
    height: 100%;
    position: absolute;
    left: 30%;
    top:15%;
    z-index: 1;

}