Question

我有一个图像网格作为我的主屏幕，文字分层。它在一个网格中，对行有最小的高度要求，但它没有最大值。列只是整个屏幕大小的一小部分，因此它们没有设置宽度。这就是我被困住的地方，如何在不知道它们大小的情况下使它们可链接？谢谢！

HTML

<div class="grid">

    <div class="f f1" href="me">
        <div class="t">
            <h3>Scum Fuck Flower Boy</h3>
            <p>Tyler the Creator</p>
        </div>
    </div>

    <div class="f f2">
        <div class="t">
            <h3>No Dope on Sundays</h3>
            <p>CyHi da Prynce</p>
        </div>
    </div>

    <div class="f f3">
        <div class="t">
            <h3>The Life of Pablo</h3>
            <p>Kanye West</p>
        </div>
    </div>

    <div class="f f4">
        <div class="t">
            <h3>Kanye and Kim have a kid</h3>
        </div>
    </div>

    <div class="f f5">
        <div class="t">
            <h3>My Beatutiful Dark Twisted Fantasy</h3>
            <p>Kanye West</p>
        </div>
    </div>

</div>

CSS

.grid { 
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
margin: 30px 150px 30px 150px;
position: relative;
}

.f {
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-color: grey;
}

.t {
position: absolute;
bottom: 0;
left: 0;
margin: 0;
margin-bottom: 10px;
}

.t h3 {
color: white;
position: relative;
font-size: 2rem;
font-weight: 500;
font-style: bold;
padding-left: 15px;
}

.t p {
color: white;
position: relative;
font-size: 1.2rem;
font-weight: 400;
padding-left: 15px;
}

.f1 {
grid-column: 1/3;
grid-row: 1/3;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/tyler.jpg");
}

.f2 {
grid-column: 3/4;
grid-row: 1/2;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/dope.jpg");

}

.f3 {
grid-column: 3/4;
grid-row: 2/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/kanye.jpg");

}

.f4 {
grid-column: 1/2;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/selfie.jpg");

}

.f5 {
grid-column: 2/3;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/fantasy.jpg");

}

Answer 1

纯CSS HTML方法是添加封面锚元素：

<div class="f f1">
    <div class="t">
        <h3>Scummy Flower Boy</h3>
        <p>Tyler the Creator</p>
    </div>
    <a class="overclick" href="/url/to/go/somewhere">Some google happy text</a>
</div>

将它添加到.f类中以给它一个基础：

.f {
    ...
    position: relative;/* shouldn't affect your grid */
    }

然后锚的特殊css就是：

a.overclick {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0;
    text-indent: -999em;/* to hide its text from humans, but google is still happy */
    }
    a.overclick:hover {
        /* this just lightly fades when you hover, can be excluded */
        background-color: #fff;
        opacity: 0.12;
        }

这会创建一个“填充”每个f div的锚链接元素，因此当您单击它时，它会转到某处。但是你没有在视觉上看到它，就在那里。我们在一些不希望javascript以这种方式处理点击事件的网站上使用过它。

现在，使用jQuery方法的javascript方法。将其添加到f类的div中：

<div class="f f1" goto="/url/to/somewhere">
     ...
</div>

然后脚本阻止：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $( document ).ready(function() {
        $(".f").click(function(e){
            window.location = $(this).attr('goto');
        });
    });
</script>

Answer 2

没有JS的最简单方法是：

<a href="https://google.com/" target="_blank"><img src="https://res.cloudinary.com/sekenikola/image/upload/v1505839813/Rost%20studio/portfolio/08.png" alt=""></a>

使用target =“_ blank”在新窗口中打开或target =“_ self”在同一窗口中打开

如何在网格中点击背景图像？

2 个答案: