如何在网格中链接图像

Question

我创建了一个包含多个图像的网格，正如您在下面的CSS中看到的，我使用了；背景图像"；与"；img"；标记。我希望能够点击这些图像，这样它就会打开一个网页，但从我所做的研究来看，我似乎只能使用锚标记链接图像，这需要我在HTML中使用img标记。我已经布置好了网格本身，所以现在我需要知道我需要什么CSS来将每个图像放在其各自的网格框中(然后我可以返回并将anchor/img标记添加到我的HTML中(。请注意，我对编码非常陌生，没有任何经验或课程，所以我可能在下面的代码中有很多错误。请对我宽容一点。

此外，如果有人能提供正确的CSS，使网格适合我的屏幕，那将是非常棒的。我目前的高度设置为717px，因为这适合我的个人屏幕，但显然其他人的屏幕大小不同。

.layout{
display: grid;
width:100%;
height: 717px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
text-align: center;
padding: 5px;
}
.color {
transition-property: background-color;
}
.color:hover{
background-color: white;
}
.box{
width: 100%;
}
.a{
color: white;
background-color: #D3D3D3;
grid-column: 1 / span 2;
grid-row: 1 / span 3;
background-image: url(https://dlcdnwebimgs.asus.com/gain/E11F9021-A684-4848-98D6-6DB2841EDE5D);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}

<div class="layout">
<div class="box a color">a</div>
<div class="box b color">b</div>
<div class="box c color">c</div>
<div class="box d color"></div>
<div class="box e color">e</div>
<div class="box f color">f</div>
<div class="box g color">g</div>
<div class="box h color">h</div>
<div class="box i color">i</div>
<div class="box k color">k</div>
<div class="box l">Computer Parts</div>
<div class="box m color">m</div>
<div class="box o color">o</div>
<div class="box p color">p</div>
<div class="box q color">q</div>
</div>

Answer 1

div标记不是最适合链接的。将标记与href属性一起使用，如下所示：

<a class="box" href="http://example.com">text</a>

使用background属性而不是img元素来设置链接的图像并不常见。应该有充分的理由这样做