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

修复 homeimage div 的 CSS。您在 CSS 中将其作为类 (.) 而不是 ID (#)。此外，您的图片链接无效（我猜是出于某种原因故意）。并检查可能需要为 0 0 的背景位置。我还将删除固定的背景附件规则。

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

Answer 2

这是因为您的 CSS 引用类 homeimage 而不是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的一个类。