在 html/css 中溢出圖像？
[英]overflowing image in html/css?
問題描述
單擊問題的屏幕截圖....在 window 屏幕上一切正常但響應大小，我的圖像在 html 上溢出。我將圖像設置為 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>
在 css 中，我將圖像作為 divs 的背景。 我為所有 div 提供背景以進行視差滾動。 它正在工作，但溢出仍然存在。
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;
}
1 個解決方案
解決方案1
0 2020-04-24 22:29:29
讓它left: 0在較小的屏幕上。
在溢出的圖像上水平滾動-HTML / CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.