HTML和CSS：使用背景图片作为可点击的链接 [英] HTML and CSS: using background image as a clickable link

问题描述

我试图使用html和css技巧，给人的印象是使用背景图片作为此可点击链接教程。然而，我无法工作，由于两个问题：

I'm trying to use a html and css trick to give the impression of using a background image as a clickable link following this tutorial. I can't get to work, however, due to two issues:

1）链接不填充背景图片的空间

1) The link is not filling the space of the background image

2）链接不会移动到屏幕之外

2) The link will not move off the screen

我正在为一个weebly网站使用html代码集成块。我是html和CSS的初学者。

I'm using an html code integration block for a weebly website. I'm a beginner to html and CSS.

<a href="website.net/link" title="photo" id=«photo»>photo</a>

<a class="photo"></a>

<style type="text/css">

.photo {
    background-image: url(myImageLink.jpg);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    background-clip: border-box;
    transition: background-size 0.2s;
    transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);

    display: block;
    width: 190px;
    height: 190px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-indent: 100%;
    white-space:nowrap;
}

.photo:hover {
    background-size: 500px;
}

</style>

推荐答案

演示

Demo

您需要一个 < a> 标签，为其设置背景，给出所需的href并使其 display：block

You need a single <a> tag, style a background to it, give required href to it and make it display: block

html

<a class="photo" href="website.net/link" title="photo" id="photo">photo</a>

css

.photo {
    background-image: url('http://www.thinksnaps.com/wp-content/uploads/2014/07/images-background.jpg');
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    background-clip: border-box;
    transition: background-size 0.2s;
    transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);

    display: block;
    width: 190px;
    height: 190px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-indent: 100%;
    white-space:nowrap;
}

.photo:hover {
    background-size: 500px;
}

这篇关于HTML和CSS：使用背景图片作为可点击的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！