Question

我正在尝试使用动态调整大小的背景图片（我已经实现）创建一个网站，但我的徽标和导航链接在我页面顶部的黑色到透明渐变图像区域中成功创建（成功创建）这个，以及）。

我遇到的问题是，较大的动态背景图片正在超越创建徽标和导航背后区域的背景图像，但不会覆盖徽标或文本本身。下面是我到目前为止的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;
}

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

我知道我错过了一个可能荒谬明显的步骤，但我无法弄明白。谢谢！

Answer 1

您希望将背景放在body标记中，并将标题图像放在标头标记中。不是身体标签。它需要一个高度。

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

据我所知，我认为这就是你要做的事情

http://jsfiddle.net/x8Kff/

希望它有所帮助。

尝试使用导航栏后面的重复图像切片和另一个背景图像

1 个答案: