英雄横幅图像不起作用 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>
I have made a simple navigation bar and under it I want to put a hero banner under it, the image URL does not work and the image does not get displayed but the text gets centered as the code for class='herotext' works properly.
我做了一个简单的导航栏，在它下面我想在它下面放一个英雄横幅，图像 URL 不起作用，图像没有显示，但文本居中，因为 class='herotext' 的代码正常工作。
please help me out with the code.请帮我解决代码。 Thanks to everyone who took their time out to help me.感谢所有抽出时间帮助我的人。
3 个解决方案
解决方案1
0 已采纳 2020-10-13 08:58:26
The hero div has no content inside it which means the height is ZERO(The span positioned absolute so its height will not calculated), just add a 'min-height' and it will work:英雄 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
**you just use this ** **你就用这个**
.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
I can see from your code that the .herobanner don't have any height because you defined the position of the span element inside it as absolute so you have several options to fix this either by removing the absolute position so the height of .herobanner will be based on the content or define a fixed height for it.我可以从您的代码中看到 .herobanner 没有任何高度，因为您将其内部的 span 元素的位置定义为绝对位置，因此您有多种选择可以通过删除绝对位置来解决此问题，因此 .herobanner 的高度将基于内容或为其定义固定高度。 See the example below:请参阅下面的示例：
1st option第一个选项
.herotext {
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
2nd option第二个选项
.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
i prefer the first solution so it will take the height of it's content.我更喜欢第一个解决方案，因此它将占用其内容的高度。
codepen https://codepen.io/ahamdan/pen/OJXyWrv代码笔https://codepen.io/ahamdan/pen/OJXyWrv
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.