英雄橫幅圖像不起作用 css 和 html
[英]Hero banner image not working css and html
問題描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mountains</title>
<link rel="stylesheet" href="/css/style.css">
<style>
/*css stylization*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header{
justify-content: space-between;
align-items: center;
display: flex;
padding: 10px 50px;
}
.logoname{
margin-bottom: 10px;
}
.logo img{
height: 50px;
width: 50px;
cursor: pointer;
}
.navlinks{
list-style-type: none;
}
.navlinks li{
display: inline-block;
padding: 20px;
}
.navlinks li a{
transition: all 0.3s ease 0s;
text-decoration: none;
font-family: roboto;
}
.navlinks li a:hover{
color: aquamarine;
}
/*hero image code*/
.herobanner {
background-image:url(/image/herobanner.jpg);
width: 100%;
}
.herotext {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
</style>
</head>
<body>
<header>
<figure class="logo">
<img src="\image/logo.png" alt="logo">
</figure>
<nav>
<ul class="navlinks">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">GALERY</a></li>
</ul>
</nav>
</header>
<div class="herobanner">
<span class="herotext">
<h1>LIVE HIGH</h1>
</span>
</div>
</body>
</html>
我做了一個簡單的導航欄，在它下面我想在它下面放一個英雄橫幅，圖像 URL 不起作用，圖像沒有顯示，但文本居中，因為 class='herotext' 的代碼正常工作。
請幫我解決代碼。 感謝所有抽出時間幫助我的人。
3 個解決方案
解決方案1
0 已采納 2020-10-13 08:58:26
英雄 div 內部沒有內容，這意味着高度為零（跨度定位為絕對值，因此不會計算其高度），只需添加一個“最小高度”即可：
/*css stylization*/ * { margin: 0px; padding: 0px; box-sizing: border-box; } header { justify-content: space-between; align-items: center; display: flex; padding: 10px 50px; } .logoname { margin-bottom: 10px; } .logo img { height: 50px; width: 50px; cursor: pointer; } .navlinks { list-style-type: none; } .navlinks li { display: inline-block; padding: 20px; } .navlinks li a { transition: all 0.3s ease 0s; text-decoration: none; font-family: roboto; } .navlinks li a:hover { color: aquamarine; } /*hero image code*/ .herobanner { background-image: url(https://www.artonicweb.com/learn/wp-content/uploads/2018/05/12-HERO-IMAGES-1024x536.jpg); width: 100%; min-height: 500px; } .herotext { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mountains</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <header> <figure class="logo"> <img src="\\image/logo.png" alt="logo"> </figure> <nav> <ul class="navlinks"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">GALERY</a></li> </ul> </nav> </header> <div class="herobanner"> <span class="herotext"> <h1>LIVE HIGH</h1> </span> </div> </body> </html>
解決方案2
0 2020-10-13 09:00:08
**你就用這個**
.herobanner {
background-image: url(https://cdn.pixabay.com/photo/2020/06/17/18/03/lights-5310589_960_720.jpg);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.herotext {
text-align: center;
position: relative;
color: #000;
}
解決方案3
0 2020-10-13 09:09:38
我可以從您的代碼中看到 .herobanner 沒有任何高度，因為您將其內部的 span 元素的位置定義為絕對位置，因此您有多種選擇可以通過刪除絕對位置來解決此問題，因此 .herobanner 的高度將基於內容或為其定義固定高度。 請參閱下面的示例：
第一個選項
.herotext {
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
第二個選項
.herobanner {
background-image:url(/image/herobanner.jpg);
background-size:cover;
background-repeat:no-repeat;
width: 100%;
height:20vh;
}
and repositon the span element so it fits inside it
我更喜歡第一個解決方案，因此它將占用其內容的高度。
HTML / CSS橫幅不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.