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

Question

我正在尝试使用html和css技巧给人留下使用背景图像作为本教程后的可点击链接的印象.但是,由于两个问题,我无法开始工作:

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

演示

你需要一个<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;
}