的全屏幕圖像只佔用頂部1/3

@import url('https://fonts.googleapis.com/css?family=Raleway') 
 
@import url('https://fonts.googleapis.com/css?family=Oswald') 
 
html, body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 
.intro { 
 
\t height: 100%; 
 
\t width:100%; 
 
\t margin: auto; 
 
\t background: url(https://static.pexels.com/photos/26206/pexels-photo.jpg) no-repeat 50% 50%; 
 
\t display: table; 
 
\t top: 0; 
 
\t background-size: cover; 
 
}

<!Doctype html> 
 
<html> 
 
<head> 
 
\t <title>Full Screen Landing Page 
 
\t </title> 
 
\t <link rel="stylesheet" type="text/css" href="main.css"/> 
 
</head> 
 
<body> 
 
\t <section class="intro"> 
 
\t \t <div class="inner"> 
 
\t \t \t <div class="content"> 
 
\t \t \t \t <h1>Breathe Easy 
 
\t \t \t \t </h1> 
 
\t \t \t \t <a href="#" class="btn">Get Started 
 
\t \t \t \t </a> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, alique 
 
\t \t \t \t </p> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, alique 
 
\t \t \t \t </p> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, alique 
 
\t \t \t \t </p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </section> 
 
</body> 
 
</html>

當我打開index.html鉻身體只佔據屏幕的頂部1/3。但是，它似乎在stackoverflow上運行良好。這是爲什麼發生？我的目的是製作一個響應式全屏登陸頁面。謝謝。

來源

2017-04-06 Drew P

奔跑在codepen以及罰款。 background-size：cover;應該這樣做......唯一我要改變的是display：block;而不是表 – StefanBob

實際上你的'.intro'不是100％，因爲html和body標籤的樣式被忽略了，你需要在導入規則後面加分號...... – DaniP

@DaniP你是對的謝謝你 –

-1

如果您希望背景佔用100％的空間，請將背景圖片應用於body元素，而不是#intro。 #intro只和你的內容一樣高，所以背景只能覆蓋那個高度。

來源

2017-04-06 20:18:53 i7nvd

-1

添加100%高度和寬度給體：

body { 
    height: 100%; 
    width: 100%; 
}

另一種解決方案是添加100vh到類.intro

intro { 
    height: 100vh; 
}

來源

2017-04-06 20:19:07 scarsam

的全屏幕圖像只佔用頂部1/3

回答

相關問題