Question

我在 div 中放置了一个背景图片，但希望它是指向另一个页面的活动链接，并且在悬停时也可能会亮起。这是 HTML 和 CSS，任何帮助将不胜感激！谢谢...

 <div class="col-sm-4 img1"><a href="football.html">Football</a></div>



  .img1 {
    background-image: url(https://....);
    background-repeat: no-repeat;
    background-size: cover;

编辑：完整代码；

  .img1 {
    background-image: url(https://images.unsplash.com/photo-1472108482137-8df36ccf0d7b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
    background-repeat: no-repeat;
    background-size: cover;
    font-weight: bolder;
    font-size: xx-large;
}

.img2 {
    background-image: url(https://cdn.pixabay.com/photo/2015/05/28/16/37/sport-788105_960_720.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: cover;
    font-weight: bolder;
    font-size: xx-large;

   }

.img3 {
    background-image: url(https://images.unsplash.com/photo-1528543606781-2f6e6857f318?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80);
    background-size: 80%;
    background-repeat: no-repeat;
    background-size: cover;
    font-weight: bolder;
    font-size: xx-large;


}

<!--   Containers center and horizontally pad your content -->
<div class="container-fluid">
    <!-- create row inside container / row is wrapper for column-->
    <div class="row">

        <!-- now create 3 columns with small breakpoint -->
           <div class="col-sm-4 brdcol img1"> <a href="watersports.html">Water Sports</a></div>

        <div class="col-sm-4 brdcol img2"><a href="football.html">Football</a></div>
        <div class="col-sm-4 brdcol img3"><a href="">Hiking</a></div>
        <!-- columns centred in page with parent container -->
    </div>
</div>

Answer 1

您需要一个带有一些 CSS 的 anchor 标签。

<a class="photo" href="website.net/link"></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

要获得可点击的图像，您需要做的就是将 div 元素（带有背景图像的元素）用锚标记包裹起来，如下所示：

<a href="football.html"><div class="col-sm-4 img1">Football</div></a>

CSS - 使背景图片成为链接

2 个答案: