Question

我有一个CSS条目，如下所示：

.header {
    background-image: url("./images/embouchure.jpg");
    background-repeat: no-repeat;
    height:160px;
    padding-left:280px;
    padding-top:50px;
    width:470px;
    color: #eaeaea;
    border-bottom:1px solid #eaeaea;


}

如何将链接添加到该CSS中的背景图像？

可以找到完整的CSS here，而使用的html是there。

Answer 1

尝试将跨度包装在锚标记中并将背景图像应用于该标记。

HTML：

<div class="header">
    <a href="/">
        <span class="header-title">My gray sea design</span><br />
        <span class="header-title-two">A beautiful design</span>
    </a>
</div>

CSS：

.header {
    border-bottom:1px solid #eaeaea;
}

.header a {
    display: block;
    background-image: url("./images/embouchure.jpg");
    background-repeat: no-repeat;
    height:160px;
    padding-left:280px;
    padding-top:50px;
    width:470px;
    color: #eaeaea;
}

Answer 2

仅使用CSS根本不可能添加链接:)使用HTML / CSS无法链接背景图像或其中的一部分。但是，它可以使用此方法暂存：

<div class="wrapWithBackgroundImage">
    <a href="#" class="invisibleLink"></a>
</div>

.wrapWithBackgroundImage {
    background-image: url(...);
}
.invisibleLink {
    display: block;
    left: 55px; top: 55px;
    position: absolute;
    height: 55px width: 55px;
}

Answer 3

您无法从CSS添加链接，您必须明确地从HTML代码执行此操作。例如，像这样：

<a href="whatever.html"><li id="header"></li></a>

在CSS背景图片中添加URL链接？

3 个答案: