#html #css
#HTML #css
Вопрос:
<!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’ работает правильно.
пожалуйста, помогите мне с кодом. Спасибо всем, кто нашел время, чтобы помочь мне.
Ответ №1:
В файле hero div нет содержимого, что означает, что высота равна НУЛЮ (диапазон позиционируется как абсолютный, поэтому его высота не будет рассчитываться), просто добавьте «min-height», и он будет работать:
/*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:
** вы просто используете это **
.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:
Из вашего кода я вижу, что .herobanner не имеет никакой высоты, потому что вы определили положение элемента span внутри него как абсолютное, поэтому у вас есть несколько вариантов исправить это, либо удалив абсолютную позицию, чтобы высота .herobanner зависела от содержимого, либо определив фиксированную высоту дляэто. Смотрите пример ниже:
1-й вариант
.herotext {
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
2-й вариант
.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
я предпочитаю первое решение, поэтому оно будет занимать высоту его содержимого.