在 html/css 中溢出图像？

Question

click for screenshot of problem.... on window screen everything is ok but responsive sizes, my image overflow on html. i set the image as background of a div for parallex;单击问题的屏幕截图....在 window 屏幕上一切正常但响应大小，我的图像在 html 上溢出。我将图像设置为 div 的背景以实现视差； how can i fix the overflowing side?我怎样才能修复溢出的一面？ i work more than 4 hours please help我工作超过 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>

in css, i gave images as background to divs.在 css 中，我将图像作为 divs 的背景。 i gave background to all divs to make parallax scrolling.我为所有 div 提供背景以进行视差滚动。 it is working but overflow still there.它正在工作，但溢出仍然存在。

 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;

}

Answer 1

Make it left: 0 on smaller screens.让它left: 0在较小的屏幕上。

在 html/css 中溢出图像？

问题描述

1 个解决方案

解决方案1
0 2020-04-24 22:29:29

在 html/css 中溢出图像？

问题描述

1 个解决方案

解决方案1 0 2020-04-24 22:29:29

解决方案1
0 2020-04-24 22:29:29