Question

我的jumbroton具有背景图像。我正在尝试添加指向另一个页面的链接。基本上，当您单击图像时，它会重定向到另一个页面。

我尝试添加图像标签，然后向其添加src，但是它会在背景中已有的图像之上添加另一个图像。

.jumbotron-fall{
    margin-top: 20px;
    background-image: url("/Users/admin/Documents/Nas/EAN x Twin Cousin tm.jpg");
    background-size: 700px 400px;
    background-position: center;
}

<div class="jumbotron jumbotron-fluid jumbotron-fall text-center row no-gutters">
    <div class="container">
        <a href="fall2018.html">
        </a>
    </div>
</div>

Answer 1

您可以简单地将jumbotron div包装在链接中。

.jumbotron-fall{
    margin-top: 20px;
    background-image: url("/Users/admin/Documents/Nas/EAN x Twin Cousin tm.jpg");
    background-size: 700px 400px;
    background-position: center;
}

<a href="fall2018.html">
    <div class="jumbotron jumbotron-fluid jumbotron-fall text-center row no-gutters">
        <div class="container">
            ...
        </div>
    </div>
</a>

Answer 2

您可以将容器包装到<a>-Tag中，也可以像这样放置<a>-absolute：

.jumbotron-fall{
  ...
  background-size: 700px 400px;
  background-position: center;
  min-height: 100vh;
  background-repeat: no-repeat;
  position: relative; // <-- IMPORTANT LINE
}

a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

如何添加到jumbtron背景图像的链接？

2 个答案: