如何在使用background-image:url时链接内容

Question

好的，我想链接另一个html网页。比如，用户点击滑块中的一个图像，它就会打开items.html。有没有办法用HTML和CSS做到这一点？

Html：

<div class="slider"> </div> </body> </html>

Css：

    .slider{
background-position: center;
    margin: 0 auto;
    width: 1200px;
    height:500px;
    border:0px;
    overflow:hidden;
    background-repeat: no-repeat;

    animation:one 30s infinite;
    position:relative;
    background-size:1200px 500px;
    transition:2s ease;
    transition-delay:2s;

    }
    @keyframes one{
    0%{background-image:url("Images/Image.png");}
    20%{background-image:url("Images/image2.png");}
    40%{background-image:url("Images/Image.png");}
    60%{background-image:url("Images/image2.png");}
    80%{background-image:url("Images/Image.png");}
    100%{background-image:url("Images/image2.png");}
    }

Answer 1

如果您希望它只是一个URL，那么可以:只需在DIV标记中添加一个onclick="window.location.href='new_url_here'"。如果你想让它根据显示的图像改变位置，你需要更多的JavaScript。例如，您可以使用onclick="performLink(this)"，然后使用以下JS函数：

function performLink(element) {
    let url;
    switch (element.style.backgroundImage) {
        case "Images/Image.png":
          url = 'http://some.url.com/first_url';
          break;
        // insert other cases here
    }
    window.location.href = url;
}

你可以用它来做一些更复杂的事情，比如验证已经设置了URL (即背景图像是你检查过的图像之一)，或者使用映射从图像路径中查找URL，而不是使用swtich语句，但这是最基本的想法。