在 CSS 背景图像中添加 URL 链接？答案

【问题标题】：Add URL link in CSS Background Image?在 CSS 背景图像中添加 URL 链接？
【发布时间】：2017-03-29 08:40:35
【问题描述】：

我有一个如下所示的 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。

【问题讨论】：

你想链接到你的css文件中的背景图片，或者你想在渲染的网页中显示图片的链接in?
@ricebowl：最后我希望网页图片有链接。但是包只通过CSS插入图片。
要使用 css 处理内容，请查看：w3.org/TR/css3-content

标签： html css url

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：

这将无法正常工作，通过将 invisibleLink 设为绝对值，它将被拉出文档流并且 div 将折叠。
它确实工作得很好。但是，可能必须调整解决方案以适应这种特定情况的特定需求。
@Simeon：我已经在 Firefox 中测试过了。它似乎只有在有足够的内容来填充 55px 垂直空间时才有效。我同意需要任何剪裁。
我明白你的意思。添加溢出：可见；可能会解决这个问题。而且我也明白，如果您认为这不是一个完整的答案，我可以查看提供的链接。然而，这种方法是解决问题的一种方法，如果他需要一个更具体的例子，有人或我可能会抽出时间来提供。
显示块和绝对位置是这里的关键。对于高度和宽度，您应该使用 100%

【解决方案3】：

您不能从 CSS 中添加链接，您必须明确地从 HTML 代码中添加。例如，像这样：

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

【讨论】：

应该是