CSS：背景 - 画像が表示されませんか？

私は時間の頭痛をイメージをコードしようとしています、それはhtmlとcssファイルと同じディレクトリにあります。箇条書きのマーカーイメージは問題なく動作しますが、ヘッダーの背景イメージは機能していないようです。私はCSSのバリデーターを介してそれを実行し、何も表示されません。CSS：背景 - 画像が表示されませんか？

EDIT：画像がロードされていることがわかったので、これで達成したいことは、画像をh1要素の上にオーバーレイする方法を理解することです。

HTML5：

<!DOCTYPE html>

<head> 
    <link style = "text/css" rel ="stylesheet" href = "pacific.css"> 
    <title>Pacific Trails Resort</title> 
    <meta Charset="utf-8"> 

</head> 

<body> 
    <header> 
     <h1>Pacific Trails Resort</h1> 
    </header> 

    <nav> 
     <a href = "index.html">Home</a> 
     &nbsp; 
     <a href = "yurts.html">Yurts</a> 
     &nbsp; 
     <a href = "activities.html">Activities</a> 
     &nbsp; 
     <a href = "reservations.html">Reservations&nbsp;</a> 
    </nav> 

    <main> 
     <h2>Enjoy Nature In Luxury</h2> 

     <img src = "coast.jpg" alt = "Pacific Trails Resort" height = "250" width = "320"> 

     <p><span class = "resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. 
     Relax in serenity with panoramic views of the Pacific Ocean.</p> 

     <ul> 
      <li>Private yurts with decks overlooking the ocean</li> 
      <li>Activities lodge with fireplace and gift shop</li> 
      <li>Nightly fine dining at the Overlook Cafe</li> 
      <li>Heated outdoor pool and whirlpool</li> 
      <li>Guided hiking tours opf the redwoods</li> 
     </ul> 

     <div> 
      <span class ="resort">Pacific Trails Resort</span> 
      <br> 
      12010 Pacific trails Road 
      <br> 
      Zephyr, CA 95555 
      <br> 
      <br> 
      888-555-5555 
      <br> 
     </div> 

     <br> 

    </main> 

    <footer> 
     Copyright &copy; 2016 Pacific Trails Resort 
     <br> 
     <a href = "mailto:[email protected]">Contact Ian Rosenberg</a> 
    </footer> 

</body>

CSS：あなたの背景には、そのわずかに隠さをロードしている

body{background-color: #FFFFFF; color: #666666; font-family: Arial, Helvetica, sans-serif} 

header{ background-image: url('sunset.jpg'); 
background-position: right; 
background-repeat: no-repeat; 
line-height: 400%; 
text-indent: 1em;} 

h1{background-color: #000033; 
color: #FFFFFF} 

nav{background-color: #90C7E3; 
font-weight: bold} 

nav a{text-decoration: none} 

h1{margin-bottom: 0; 
font-family: Georgia, Times New Roman, serif} 

h2{color: #3399CC; 
font-family: Georgia, Times New Roman, serif} 

h3{font-family: Georgia, Times New Roman, serif} 

ul{list-style-image: url("marker.gif")} 

dt{color: #000033} 

footer{font-size: 70%; 
font-style: italic; 
text-align: center; 
font-family: Georgia, Times New Roman, serif} 

.resort{color: #5C7FA3; 
font-weight: bold} 

#contact{font-size: 90%}

出典

2016-10-11 IanR

。あなたが見ている問題は、それが表示なので、あなたのH1要素が背景全体を覆っていることであるH1要素のデフォルトである（blockに設定されている。

私はあなたがそれを表示する方法がわかりませんが、あなたはたくさんのを持っていますオプション。あなたはH1 CSS定義からbackground-colorを削除することができます。背景が見えるように思われる。DEMO

それとも、あなたの要件に応じinline-blockまたはinlineへH1要素のdisplayを変更することができます。DEMO

最後にH1の背景色が表示されるヘッダークラスのheightを設定することができます。 DEMO

もう一度やり方を変えることができます。私はあなたの究極の設計目標が何であるかを知らないので、実際に次のステップを決定しなければなりません。しかし、それがあなたの背景を見ることができない理由の原因です。

注：最初の2分間は、CSSのH1クラスを変更しました。あなたがこの道を行くなら、私はあなたがH1ヘッダーの同じスタイルをあなたのページの他のH1に適用したいと思うと思っていないので、より正確にH1をターゲットにすることをお勧めします。私はそれをどうやって修正できるかを説明するだけでした。

出典

2016-10-11 17:02:38 atrljoe

イメージを黒い背景の上に置くことはできますか？画像は黒にフェードして、遷移を滑らかに保ちます。 – IanR

これって何？ https://jsfiddle.net/d7nqmh6e/3/ 私がここでしたのは、「背景色」を黒に設定して高さを追加し、イメージを繰り返さないようにすることでした。 – atrljoe

h1カラースタイルを削除して、背景イメージスタイルをオーバーライドします。また、.navカラールール。 firebugまたはchromesのinspect要素を使用してスタイルを調べ、どのスタイルが優先されているかを確認します。さまざまなスタイルをオン/オフして、どの作品が表示されるかを確認することができます。

body { 
 
    background-color: #FFFFFF; 
 
    color: #666666; 
 
    font-family: Arial, Helvetica, sans-serif 
 
} 
 

 
header { 
 
    background-image: url(http://fandom.wikia.com/wp-content/uploads/2016/09/Arrowverse.jpg); 
 
    background-position: right; 
 
    background-repeat: no-repeat; 
 
    line-height: 400%; 
 
    text-indent: 1em; 
 
} 
 

 
h1 { 
 
    /* remove this 
 
    background-color: #000033; */ 
 
    
 
    color: #FFFFFF 
 
} 
 

 
nav { 
 
    
 
    background-color: #90C7E3; 
 

 
    font-weight: bold 
 
} 
 

 
nav a { 
 
    text-decoration: none 
 
} 
 

 
h1 { 
 
    margin-bottom: 0; 
 
    font-family: Georgia, Times New Roman, serif 
 
} 
 

 
h2 { 
 
    color: #3399CC; 
 
    font-family: Georgia, Times New Roman, serif 
 
} 
 

 
h3 { 
 
    font-family: Georgia, Times New Roman, serif 
 
} 
 

 
ul { 
 
    list-style-image: url("sqpurple.gif") 
 
} 
 

 
dt { 
 
    color: #000033 
 
} 
 

 
footer { 
 
    font-size: 70%; 
 
    font-style: italic; 
 
    text-align: center; 
 
    font-family: Georgia, Times New Roman, serif 
 
} 
 

 
.resort { 
 
    color: #5C7FA3; 
 
    font-weight: bold 
 
} 
 

 
#contact { 
 
    font-size: 90% 
 
}

<header> 
 
    <h1>Pacific Trails Resort</h1> 
 
</header> 
 

 
<nav> 
 
    <a href="index.html">Home</a> &nbsp; 
 
    <a href="yurts.html">Yurts</a> &nbsp; 
 
    <a href="activities.html">Activities</a> &nbsp; 
 
    <a href="reservations.html">Reservations&nbsp;</a> 
 
</nav> 
 

 
<main> 
 
    <h2>Enjoy Nature In Luxury</h2> 
 

 
    <img src="coast.jpg" alt="Pacific Trails Resort" height="250" width="320"> 
 

 
    <p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p> 
 

 
    <ul> 
 
    <li>Private yurts with decks overlooking the ocean</li> 
 
    <li>Activities lodge with fireplace and gift shop</li> 
 
    <li>Nightly fine dining at the Overlook Cafe</li> 
 
    <li>Heated outdoor pool and whirlpool</li> 
 
    <li>Guided hiking tours opf the redwoods</li> 
 
    </ul> 
 

 
    <div> 
 
    <span class="resort">Pacific Trails Resort</span> 
 
    <br> 12010 Pacific trails Road 
 
    <br> Zephyr, CA 95555 
 
    <br> 
 
    <br> 888-555-5555 
 
    <br> 
 
    </div> 
 

 
    <br> 
 

 
</main> 
 

 
<footer> 
 
    Copyright &copy; 2016 Pacific Trails Resort 
 
    <br> 
 
    <a href="mailto:[email protected]">Contact Ian Rosenberg</a> 
 
</footer>

出典

2016-10-11 17:13:18

私は、次のされた運動は、H1要素の背景色や色の属性を持っていなかった、私は間違って何をやっていた考え出しました。バックグラウンドの上にイメージを表示するには、私は自分のヘッダーコードを

に変更しました。

header{background-color: #000033; 
    color: #FFFFFF; 
    background-position: right; 
    background-repeat: no-repeat; 
    line-height: 400%; 
    text-indent: 1em; 
    background-image: url('sunset.jpg');}

出典

2016-10-12 00:03:30 IanR

CSS：背景 - 画像が表示されませんか？

答えて

関連する問題