0

我正在尝试创建一个具有可动态调整大小的背景图像的网站（我已经实现了），但我的徽标和导航链接也位于页面顶部的黑色到透明渐变图像区域中（也成功创建了这个） .

我遇到的问题是，较大的动态背景图像超过了在我的徽标和导航后面创建区域的背景图像，但没有覆盖徽标或文本本身。以下是我目前拥有的 HTML 和 CSS。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Michael Hunter Photography</title>
<link rel="stylesheet" type="text/css" href="portfolio-style1.css">
</head>

<body>
<div id="header">
    <div id="logo"><img src="logo1-trans1.png" /></div>
    <div id="navbar">
    <a href="home.html">Home |</a>
    <a href="portfolio.html"> Portfolio |</a>
    <a href="#"> Blog |</a>
    <a href="about.html"> About |</a>
    <a href="contact.html"> Contact</a>
    </div>
</div>
</body>
</html>

我的 CSS

@charset "UTF-8";
/* CSS Document */

@font-face
{
    font-family:"BankGothic Md BT Medium";
    src: url('bankgthd.ttf')
    ,url('bankgthd.eot');/*IE9*/
}

body{
    background-image:url(header-gradient.png);
    background-repeat: repeat-x;
    position:static;
    z-index:1;
}
#logo {
    float:left;
    position:relative;
    left:20px;
    top:20px;
}
#navbar {
    font-family:"BankGothic Md BT Medium";
    font-size:23px;
    color:#FFF;
    float:right;
    position:relative;
    top:75px;
    right:15px;
}

#navbar a {
    color:white;
    text-decoration:none;
}
html {
    background: url(bg1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

“html {”部分是我为我的动态背景图像工作的代码，也是我唯一可以按照我想要的方式工作的 vanilla CSS，所以我真的不想搞砸用它。在顶部（基本上作为标题）我的导航和徽标后面使用的渐变图像位于 CSS 中的“正文”下方。如果您还没有弄清楚，目标是使用渐变优雅地过渡到主背景图像，但它没有按预期工作。我尝试将主背景图像定位到 z-index 它，但这搞砸了并且无法正常工作。

我知道我错过了一个可能非常明显的步骤，但我无法弄清楚。谢谢！

4

1 回答 1

0

您想将背景放在正文标签中，将标题图像放在标题标签中。不是身体标签。它需要一个高度。

#header{
background:url(header.jpg);
height:200px;
}

据我了解，我认为这就是你想要做的

http://jsfiddle.net/x8Kff/

希望能帮助到你。

于 2013-03-16T06:47:24.697 回答