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

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

修复homeimage div的CSS。你在CSS中将它作为一个类（。）而不是一个ID（＃）。此外，您图像的链接无效（出于某些原因，我猜是有目的）。并检查可能需要为0的背景位置。我还将删除固定的背景附加规则。

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

Answer 2

这是因为你的CSS引用了类homeimage和 NOT ID（这就是你的标记中的内容）。

#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。