將背景圖片移到頂部[CSS]
[英]Move background image to top [CSS]
問題描述
我的背景圖片和頁面頂部之間有空白，我正在嘗試完成代碼學院課程。 這是它的外觀，這是我的代碼：
html, body { margin: 0; } h1, h2, a { font-family: 'Oswald', sans-serif; } } a:link { background:black; color:white; text-transform:uppercase; } a:hover { background:gold; color:white; text-transform:uppercase; } a:active { background:black; color:white; text-transform:uppercase; } a:visited { background:black; color:white; text-transform:uppercase; } p { font-family: Helvetica, Arial, sans-serif; } .container { width: 940px; margin: 0 auto; } /* Main */ .main { background: url("https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg") no-repeat center center; background-size: cover; height: 600px; } .main .container { position:relative; top:100px; } .main { height: 600px; } .main h1 { font-size: 150px; } .main p { font-size: 18px; } /* Supporting */ .supporting { text-align: center; padding: 50px 0 80px; } .supporting .col { float: left; width: 28%; padding: 10px; } .supporting h1, .supporting h2 { color: #ffa800; font-size: 20px; margin-bottom: 10px; } .clearfix { clear: both; } .supporting p { color: #efefef; margin-bottom: 20px; line-height: 20px; font-size: 12px; } .supporting .btn { background-color: #eee; color: #1c1c1c; font-size: 18px; padding: 8px 30px; text-decoration: none; display: inline-block; } /* Feature */ .feature { height: 600px; } .feature h1, .feature h2 { color: #fff; font-size: 40px; margin: 0; padding:50px 0 0; } /* Footer */ .footer { height: 600px; } .footer h1, .footer h2 { color: #fff; font-size: 40px; margin: 0 0 20px 0; padding:50px 0 0; } .footer p { color: #fff; margin: 0 0 20px 0; font-size: 18px; } @media (min-width:600px) { .main h1 { font-size: 200px; } .supporting .col { width: 30%; } .supporting h2 { font-size: 40px; } .supporting p { font-size: 14px; } .feature h2 { font-size: 60px; } }
<head> <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'> </head> <body> <div class="main"> <div class="container"> <h1>Move</h1> <p>Form healthy habits fitness blah</p> <a href="#">Click Here</a> </div> </div> <div class="supporting"> <div class="container"> <div class="col"> <h2>Move</h2> <p>Become more active by tracking your runs, rides, and walks.</p> </div> <div class="clearfix"></div> </div> </div> <div class="feature"> <div class="container"> </div> </div> </body>
3 個解決方案
解決方案1
3 已采納 2015-08-01 18:26:38
這是因為文本周圍有空白。 只需添加margin:0; 到h1, h2, a如下所示的h1, h2, a可以解決您的問題。
h1, h2, a {
margin:0;
font-family: 'Oswald', sans-serif;
}
解決方案2
0 2015-08-01 18:35:52
.main .container {
position:relative;
top:100px; // Remove
}
html, body {
margin: 0;
padding: 0; // Add
}
解決方案3
-1 2015-08-01 18:25:06
嘗試在CSS文件中更改以下內容
body {
margin: -10px;
}
這會減少主體頂部的空白。這可能不是實際的解決方法。
將圖像移到CSS的頂部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.