如何將背景圖像設置爲帶徽標和導航欄的標題？

-1

我對網頁設計很陌生，需要很多幫助。我想創建我自己的網站。背景將成爲標題。在背景上，徽標將位於左側，而導航欄位於右側。文字也將以背景爲中心。這是一個例子。此外，絕對意味着什麼？任何人都可以解釋給我嗎？任何幫助是極大的讚賞！感謝這是一個例子：如何將背景圖像設置爲帶徽標和導航欄的標題？

這是我的代碼....

* { 
 
\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>

來源

2017-08-04 XxS0ul678

與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，並嘗試一些例子

來源

2017-08-04 03:01:38

**一個元素位置：相對;相對於其正常位置定位。**我沒有看到你的意思 – 2017-08-04 03:05:19

在英雄類像素改變你的身高：

.hero { 
    height: 100%; 
}

來源

2017-08-04 03:07:03

如何將背景圖像設置爲帶徽標和導航欄的標題？

回答

相關問題