我正在嘗試為學校做一個專案，但我遇到了無法解決的問題。當我嘗試調整視窗大小時（順便說一句，我使用的是 chrome，你可以在圖片中看到）我得到了一個底部滾動條，它可以作業但有一個小問題......背景中的文本正在消失其中，當我向右滾動時，我有一個白色邊框，文本出現但背景沒有擴展或 idk ......我嘗試過：浮動：左；溢位-x：隱藏；（這可行，但我不能再使用滾動條，也不能擴展我的背景，我在其他論壇上看到過這個“解決方案”）我不知道該怎么辦...請幫幫我... 圖片帶代碼 帶鉻的圖片
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}
.backgroundColor{
background: #1d2026;
min-height: 100vh;
width: 100%;
color: #1d2026;
position: absolute;
}
h1 p{
text-align: center;
padding-top: 150px;
padding-bottom: auto;
font-size: 200px;
color: #29313f;
}
.roundBtn {
font-size: 108px;
color: #29313f;
background: #1d2026;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0%;
border: none;
text-decoration: none;
margin-top: 50px;
margin-left: 48%;
}
h4 p{
font-size: 40px;
color: #ffff
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="backgroundColor">
<header>
<nav>
<img src="images/logoT.png" class="logoTemp">
</nav>
</header>
<h1><p>welcome</p></h1>
<a class="roundBtn" href="">
<ion-icon name="chevron-forward-sharp"></ion-icon>
<!----<h4><p>Take a look</p></h4></!---->
</a>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>uj5u.com熱心網友回復：
overflow: hidden;在你的.backgroundColor課堂上使用。使用這種結構，您最好的解決方案是調整h1它以適應移動視口。為了實作這一點，我曾經media queries將h1 font-size.
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}
.backgroundColor{
background: #1d2026;
min-height: 100vh;
width: 100%;
color: #1d2026;
position: absolute;
overflow: hidden;
}
h1 p{
text-align: center;
padding-top: 150px;
padding-bottom: auto;
font-size: 200px;
color: #29313f;
}
.roundBtn {
font-size: 108px;
color: #29313f;
background: #1d2026;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0%;
border: none;
text-decoration: none;
margin-top: 50px;
margin-left: 48%;
}
h4 p{
font-size: 40px;
color: #ffff
}
@media only screen and (max-width: 800px) {
h1 p {
font-size: 7rem;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="backgroundColor">
<header>
<nav>
<img src="images/logoT.png" class="logoTemp">
</nav>
</header>
<h1><p>welcome</p></h1>
<a class="roundBtn" href="">
<ion-icon name="chevron-forward-sharp"></ion-icon>
<!----<h4><p>Take a look</p></h4></!---->
</a>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>顯然，您可以根據需要隨意調整尺寸。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/358390.html
上一篇：如何將影像從固定大小影片到全屏？