Question

我正在尝试使用html和css技巧给人留下使用背景图片作为此tutorial之后的可点击链接的印象。然而，由于两个问题，我无法开始工作：

1）链接未填充背景图像的空间

2）链接不会离开屏幕

我正在为一个网站使用html代码集成块。我是html和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>

Answer 1

<强> Demo

您需要一个<a>代码，为其设置背景样式，为其提供所需的href并将其设为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;
}

Answer 2

另一个如何使用.svg图像作为可点击背景的示例。请注意，链接上的文本由css隐藏，但可能会在文本后显示可点击的.svg图像。如果你需要在文本之前显示的图像只是在下面的代码片段中改变::之后的伪元素::之前。

UPD ：添加了材料设计Google字体图标作为可点击的背景示例。

self

Answer 3

检查你的HTML代码应该是这样的

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

HTML和CSS：使用背景图像作为可点击链接

3 个答案: