如何在网格中链接图像答案

【问题标题】：How to link an image in a grid如何在网格中链接图像
【发布时间】：2021-03-16 15:40:34
【问题描述】：

我创建了一个包含多个图像的网格，正如您在下面的 CSS 中所见，我使用了“背景图像”属性，而不是 HTML 中的“img”标签。我希望能够单击这些图像以打开一个网页，但从我所做的研究来看，我似乎只能使用锚标记链接图像，这需要我在 HTML 中使用 img 标记.我已经布置了网格本身，所以现在我需要知道我需要什么 CSS 来将每个图像适合其各自的网格框（然后我可以返回并将锚点/img 标签添加到我的 HTML 中）。请注意，我对编码非常陌生，并且经验或课程作业为零，因此我在下面的代码中可能有很多错误。请对我放轻松。

另外，如果有人能提供正确的 CSS 以使网格适合我的屏幕，那就太棒了。我目前将高度设置为 717 像素，因为这适合我的个人屏幕，但显然其他人的屏幕尺寸不同。

.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>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

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

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

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

【讨论】：