背景尺寸：封面； 沒有覆蓋整個頁面
[英]Background-size: cover; doesn't cover the whole page
問題描述
我看過很多關於這個主題的帖子，但沒有一個解決方案能幫我解決這個問題。 目前正在從事一個 freecodecamp 項目，我有一個問題，即使我使用了 background-size:cover，背景圖像也沒有填滿整個屏幕。我是初學者，所以如果我在這里遺漏了一些非常基本的東西，我不會感到驚訝。 .
代碼：
body { font-family: 'poppins', sans-serif; color: #f3f3f3; padding: 0; margin: 0; background-position: center; height: 100vh; width: 100vw; background-size: cover; background-image: url("https://media.istockphoto.com/photos/closeup-focus-on-persons-hands-typing-on-the-desktop-computer-show-picture-id1356364268?b=1&k=20&m=1356364268&s=170667a&w=0&h=YibLOYYDkERhgK4BvRw3TzIlPYQAo4nbMnFA-5CvZ0k="); background-repeat: no-repeat; }.color-overlay { width: 100%; height: 100vh; background-color: rgba(45, 0, 128, 30%) } h1, p{ text-align: center; } h1 { margin: 0; padding-top: 1em; } p { margin: 0; margin-bottom: 1.5em } form { max-width: 600px; min-width: 300px; border-radius: 5px; margin: 0 auto; padding-bottom: 40px; padding-top: 25px; background-color: rgba(0, 0, 0, 50%) } fieldset { border: none; } label { display: block; margin-left: 5px; margin-bottom: 0.5em; } input, textarea, select { width: 100%; margin: 10px 0 0 0; height: 2em; } select { width: 98%; margin-left: 5.5px; }.inline { width: unset; margin: 0; margin-top: -0.3em; margin-right: 0.5em; vertical-align: middle; }
<.DOCTYPE html> <html> <link rel="stylesheet" href="styles,css"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1?0"> <title>Survey Form</title> </head> <body> <div class="color-overlay"> <header> <h1 id="title">freeCodeCamp Survey Form</h1> <p id="description">Thank you for taking the time to help us improve the platform</p> </header> <form id="survey-form"> <fieldset> <label id="name-label">Name <input id="name" type="text" placeholder="Enter your name" required></label> <label id="email-label">Email <input id="email" type="email" placeholder="Enter your Email" required></label> <label id="number-label">Age<span> (Optional)</span> <input id="number" type="number" placeholder="Age" min="13" max="120"></label> <label>Which option best describes your current role?</label> <select id="dropdown"> <option disabled selected>Select current role</option> <option>1</option> </select> </fieldset> <fieldset> <label>Would you recommend freeCodeCamp to a friend?</label> <label><input class="inline" type="radio" value="1" name="recommended"> Definetly</label> <label><input class="inline" type="radio" value="2" name="recommended"> Maybe</label> <label><input class="inline" type="radio" value="3" name="recommended"> Not sure</label> </fieldset> <fieldset> <label>What is your favorite feature of freeCodecamp?</label> <select id="dropdown2"> <option disabled selected>Select an option</option> <option>test</option> </select> <label>What would you like to see improved?<span> (Check all that apply)</span></label> <label><input class="inline" type="checkbox" value="1">1</label> <label><input class="inline" type="checkbox" value="2">2</label> <label>Any comments or suggestions.</label> <textarea placeholder="Enter your comment here..."></textarea> </fieldset> <input type="submit" id="submit" value="Submit"> </form> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2022-08-24 14:03:47
在body和.color-overlay上使用min-height而不是僅使用height以防止尺寸變得小於指定的值。
body { font-family: 'poppins', sans-serif; color: #f3f3f3; padding: 0; margin: 0; background-position: center; min-height: 100vh; width: 100vw; background-size: cover; background-image: url("https://media.istockphoto.com/photos/closeup-focus-on-persons-hands-typing-on-the-desktop-computer-show-picture-id1356364268?b=1&k=20&m=1356364268&s=170667a&w=0&h=YibLOYYDkERhgK4BvRw3TzIlPYQAo4nbMnFA-5CvZ0k="); background-repeat: no-repeat; }.color-overlay { width: 100%; min-height: 100vh; background-color: rgba(45, 0, 128, 30%) } h1, p { text-align: center; } h1 { margin: 0; padding-top: 1em; } p { margin: 0; margin-bottom: 1.5em } form { max-width: 600px; min-width: 300px; border-radius: 5px; margin: 0 auto; padding-bottom: 40px; padding-top: 25px; background-color: rgba(0, 0, 0, 50%) } fieldset { border: none; } label { display: block; margin-left: 5px; margin-bottom: 0.5em; } input, textarea, select { width: 100%; margin: 10px 0 0 0; height: 2em; } select { width: 98%; margin-left: 5.5px; }.inline { width: unset; margin: 0; margin-top: -0.3em; margin-right: 0.5em; vertical-align: middle; }
<.DOCTYPE html> <html> <link rel="stylesheet" href="styles,css"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1?0"> <title>Survey Form</title> </head> <body> <div class="color-overlay"> <header> <h1 id="title">freeCodeCamp Survey Form</h1> <p id="description">Thank you for taking the time to help us improve the platform</p> </header> <form id="survey-form"> <fieldset> <label id="name-label">Name <input id="name" type="text" placeholder="Enter your name" required></label> <label id="email-label">Email <input id="email" type="email" placeholder="Enter your Email" required></label> <label id="number-label">Age<span> (Optional)</span> <input id="number" type="number" placeholder="Age" min="13" max="120"></label> <label>Which option best describes your current role?</label> <select id="dropdown"> <option disabled selected>Select current role</option> <option>1</option> </select> </fieldset> <fieldset> <label>Would you recommend freeCodeCamp to a friend?</label> <label><input class="inline" type="radio" value="1" name="recommended"> Definetly</label> <label><input class="inline" type="radio" value="2" name="recommended"> Maybe</label> <label><input class="inline" type="radio" value="3" name="recommended"> Not sure</label> </fieldset> <fieldset> <label>What is your favorite feature of freeCodecamp?</label> <select id="dropdown2"> <option disabled selected>Select an option</option> <option>test</option> </select> <label>What would you like to see improved?<span> (Check all that apply)</span></label> <label><input class="inline" type="checkbox" value="1">1</label> <label><input class="inline" type="checkbox" value="2">2</label> <label>Any comments or suggestions.</label> <textarea placeholder="Enter your comment here..."></textarea> </fieldset> <input type="submit" id="submit" value="Submit"> </form> </div> </body> </html>
背景尺寸：封面;實際上並沒有拉伸圖像？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.