使用CSS添加图片超链接

Question

使用CSS添加图片超链接

9

我知道这可能是最愚蠢的问题，但我在CSS方面是一个完全的新手；如何使用来自CSS的图像在网页上创建超链接？我正在尝试将我的网站标题图像设置为指向主页的链接。谢谢！

编辑：为了明确起见，我正在从CSS中获取我的图像，标题div的CSS代码如下：

#header
{
    width: 1000px;
    margin: 0px auto;
    padding: 0px 15px 0px 15px;
    border: none;
    background: url(images/title.png) no-repeat bottom;
    width: 1000px;
    height: 100px;
}

我希望知道如何在网页上将这个 div 做成超链接，而不必将它变成锚点而非

元素。

- kronoz

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- str · Answer 1

我经历过一些情况，我更喜欢绕过使用HTML的img标签。上述答案要么冗余，要么无法正常工作。

零HTML并不完全可能，但你可以将@import链接样式化到你的CSS控制台或者你想叫它的任何地方，并调用你的头部ID。但你会受到页面部分的限制。

像这样：

@import url('https://yourdestinationlink.com');

然后在CSS中。

#header a[href='https://yourdestinationlink.com'] {
    display: flex;
    position: absolute;
    }
.aside a[href='yourdestination.com'] {
    background-image: url('https://yourimage.com');
    }

或者你可以将目标链接标签化到你的HTML头部，并在你的CSS中引用，就像这样：

<link src='https://yourdestinationlink.com'/>

另一个干净的选择是创建一个div来容纳你想要转换为链接的图像的锚标签。首先，创建一个容器div。然后，在该div中放置一个锚标签。在锚标签中href你的目标链接。在CSS中，使用background-image来将图像插入到锚标签中。

像这样：

将您的锚标签放在一个div中，并将目标链接放入锚标签的href中。

```html

```

在CSS中：

```css .image-container a { background-image: url('https://yourimage.com'); } ```

或者给你的锚点分配一个类名和样式，就像这样：

   <div class="image-container">
    <a class="image-link" href="https://yourdestinationlink.com"></a>
   </div>

   .image-link {
        background-image: url('https://yourimage.com');
        }