html - リンクタグの後ろに背景画像を設定する

Question

私は現在持っています：

画像へのリンクを使用してdivの背景を設定しようとしています。また、リンクではなく、画像のみに不透明度を適用したいだけです。これは私が持っているものです:

#homelinks
{
    border: 1px solid black;
    height: 80px;
    width: auto;
    font-size: 20pt;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    overflow: auto;
    padding-top: 75px;
}

#homeimage
{
    opacity: 0.3;
    background-image:url("http://www.imagegoeshere.jpg");
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-position: 100% 100%;            
}

HTML:

<h1>
    My Surfing Shop
</h1>
<div id="homeimage">
    <div id="homelinks">
        <a href="http://www.111.html">Home</a> 
        <a href="http://www.222.html">Products</a>
        <a href="http://www.333.html">Surf Reports</a> 
        <a href="http://www.444.html">Surf lessons</a>
        <a href="http://www.555.html">Message Board</a> 
        <a href="http://www.666.html">Directions</a>
    </div>
</div>

Answer 1

これは、CSS が ID ではなくクラスのホームイメージを参照しているためです(これがマークアップに含まれています)。

#homeimage
{
    opacity: 0.3;
    background-image:url("http://www.imagegoeshere.jpg");
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-position: 100% 100%;            
}

Answer 2

ホームイメージ div の CSS を修正します。ID (#) ではなく、クラス (.) として CSS に含まれています。また、あなたの画像へのリンクは無効でした（何らかの理由で意図的に推測しています）。そして、0 0 である必要がある可能性がある background-position を確認します。固定の background-attachment ルールも削除します。

#homeimage
{
    opacity: 0.3;
    background-image:url("http://www.imagegoeshere.jpg");
    background-repeat:no-repeat;
    background-position: 100% 100%;           
}​

Answer 3

CSS で #homeimage を使用します。ピリオドはホームイメージのクラスを表します。