0

動的にサイズ変更可能な背景画像 (私が達成したもの) を使用して Web サイトを作成しようとしていますが、ページの上部にある黒から透明のグラデーション画像領域にロゴとナビゲーション リンクを配置しています (これも正常に作成されました)。 .

私が直面している問題は、より大きな動的背景画像が、ロゴとナビゲーションの背後の領域を作成している背景画像を追い越しているが、ロゴやテキスト自体をオーバーレイしていないことです. 以下は、私がこれまでに持っている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 {」セクションは、動的な背景画像を動作させるために取得したコードであり、希望どおりに動作させるために取得した唯一のバニラ CSS であるため、めちゃくちゃにしたくありませんそれと。上部のナビゲーションとロゴ (基本的にはヘッダー) の背後で使用するグラデーション画像は、CSS の「本文」の下にあります。わからない場合は、グラデーションを使用してメインの背景画像に優雅に移行することを目標としていましたが、意図したとおりに機能していません。メインの背景画像を z-index に配置しようとしましたが、うまくいきません。

おそらくとてつもなく明白なステップを見逃していることは知っていますが、それを理解することはできません。ありがとう！

4

1 に答える 1

0

bodyタグに背景、headerタグにヘッダー画像を入れたいとします。ボディタグではありません。そして高さが必要です。

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

私が理解している限り、これがあなたがやろうとしていることだと思います

http://jsfiddle.net/x8Kff/

それが役に立てば幸い。

于 2013-03-16T06:47:24.697 に答える