通过没有 JS、Action、Object 等的 CSS 超链接图像答案

【问题标题】：hyperlink an image via CSS without JS, Action, Object etc通过没有 JS、Action、Object 等的 CSS 超链接图像
【发布时间】：2016-10-14 15:33:23
【问题描述】：

希望有人能帮我解决我遇到的这个问题。

我需要超链接一个图像，该图像将作为 CSS 中的背景图像。有没有办法做到这一点？

不幸的是，我不能使用 jQuery、JS、Ajax、Object 或任何形式的操作。脚本被 100% 阻止。

我可以访问 HTML，但是对于这个特定的图像，我需要它来自 CSS 并被超链接。

有没有办法做到这一点？

谢谢

丹尼

【问题讨论】：

标签： html css href

【解决方案1】：

您可以使用 CSS 设置背景图片：

body {
   background-image: url("paper.gif");
   background-color: #cccccc;
}

但是，如果您还需要超链接（例如，您需要能够点击它，那么从技术上讲，它不再是背景图片。为此，您可以尝试like this 然后设置z-index 类似于 -1。

【讨论】：

【解决方案2】：

我需要超链接一个图像，该图像将作为背景图像 CSS。有没有办法做到这一点？

不，您不能在 CSS 中链接元素。

你可以创建一个标签并给它一个类

HTML -

<a href="/link" class="background-image"></a>

CSS -

.background-image {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url('location/of/your/img.jpg');
}

【讨论】：

【解决方案3】：

是的，您可以通过链接或通过在链接中包装带有背景的元素来做到这一点

<a href="link.html"></a>


a {
   display: inline-block;
   width: 100vw;//change
   height: 100vh;//change
   background-image: url("paper.gif");
   background-color: #cccccc;
}

或input type image 形式

 <input type="image" src="/files/2917/fxlogo.png" >

【讨论】：

【解决方案4】：

谢谢大家的回复。

我可以尝试只用上面提到的 href 包装一个空 div 并缩小 html。

我遇到的主要问题是我想放置一个签名并且不希望通过添加 display:none 或直接从 html 中删除来轻松禁用它。

我当前的方法是使用 jQuery 并将其添加到特定的 DIV 之后，因此用户无法禁用，因为他们无权访问某些核心文件。

我会玩，这里有一些很棒的想法，所以再次感谢您的快速回复:)

【讨论】：

【解决方案5】：

通过 CSS 是不可能的。这不是语言的目的。绕过 js 脚本的最佳方法是专注于 HTML5 属性。

【讨论】：