设置链接标签背后的背景图像

Question

I currently have:

and I am looking to set the background of the div with links to an image. Also I only want opacity to apply to the image only, not the links. This is what I have:

#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

Fix the CSS for your homeimage div. You have it in your CSS as a class (.) instead of an ID (#). Also the link to your image was invalid (on purpose for some reason I'm guessing). And check the background-position which might need to be 0 0. I'd also remove the fixed background-attachment rule.

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

Answer 2

It's because your CSS refers to the class homeimage and NOT the ID (that's what it is in your markup).

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

Answer 3

在CSS中使用#homeimage，句点指的是一类homeimage。