如何将背景图像设置为带徽标和导航栏的标题?
问题描述:
我对网页设计很陌生,需要很多帮助。 我想创建我自己的网站。背景将成为标题。 在背景上,徽标将位于左侧,而导航栏位于右侧。文字也将以背景为中心。这是一个例子。此外,绝对意味着什么?任何人都可以解释给我吗?任何帮助是极大的赞赏!感谢 这是一个例子:如何将背景图像设置为带徽标和导航栏的标题?
这是我的代码....
* {
\t box-sizing: border-box;
\t margin: 0;
\t padding: 0;
}
.container {
\t position: absolute;
\t left: 0;
\t top: 0;
\t width: 100%:
\t height: 100%;
\t
}
.hero {
\t height: 100%:
\t width: 100%;
\t background-image:url(../images/Background.png);
\t background-size: cover;
\t background-repeat: no repeat;
\t background-position: center center;
\t
}
nav ul {
\t margin: 0;
\t padding: 0;
\t list-style: none; /* remove bullet point */
\t float: right;
}
nav li {
\t display: inline-block;
\t margin: 1em;
\t padding: 0.5em; \t
}
nav a {
\t font-weight: 800;
\t text-decoration: none;
\t text-transform: uppercase;
}
nav ul a:hover {
\t color: #f13647;
\t transition: all 0.5s ease-in;
\t padding: 15px 0; \t \t \t \t \t
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Josh</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/modernizr.custom.40753.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/Test.css">
</head>
<body>
\t <header>
\t \t <div class="container">
\t \t \t <div class="hero">
\t \t \t \t <img src="images/logoo.png" alt="Logo FitnessX " class="logo">
\t \t \t \t <nav class="sitenavigation">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="index.html">Home</a></li>
\t \t \t \t \t \t <li><a href="aboutus.html">About Me</a></li>
\t \t \t \t \t \t <li><a href="Work.html"></a>Work</li>
\t \t \t \t \t \t <li><a href=""></a>Blog</li>
\t \t \t \t \t </ul>
\t \t \t \t </nav>
\t \t \t \t <div class="home-hero">
\t \t \t \t \t <h2>Hello my name is josh</h2>
\t \t \t \t \t <p>I am 18 years old</p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </header>
</body>
</html>
答
与position: absolute;
的元素相对于最近定位的祖先(而不是相对定位被定位到视口,像固定)。 但是;如果绝对定位元素没有定位祖先,则它使用文档正文,并随页面滚动一起移动。
注意:“定位”元素的位置是除静态以外的任何元素。
下面是一个简单的例子:
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="absolute">This div element has position: absolute; (ancestor is body) </div>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
<div class="relative">This div also has positio: relative; which positions the div after the top div</div>
更多信息,请参阅this,并尝试一些例子
答
在英雄类像素改变你的身高:
.hero {
height: 100%;
}
**一个元素位置:相对;相对于其正常位置定位。**我没有看到你的意思 – 2017-08-04 03:05:19