尝试在 CSS 网格中添加图像答案

【问题标题】：Trying to add an image inside a CSS Grid尝试在 CSS 网格中添加图像
【发布时间】：2019-05-10 20:16:49
【问题描述】：

如何将图像放入 CSS 网格中？

这就是我正在尝试做的所有事情，但无法弄清楚。

这是我对 CSS 网格的尝试：

https://jsfiddle.net/g6oaht8f/72/

但它并没有像我预期的那样工作。

网格在此处的图像上不可见。

如果网格是可见的，线条将是红色。

完整代码：

https://jsfiddle.net/g6oaht8f/73/

.wrap {
  position: relative;
  width: 600px;
  height: 600px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  background: url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
}

.wrap svg:hover path {
  fill: #0059dd;
}

.wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
  background: rgba(0, 0, 0, 0.2);
}

iframe {
  position: absolute;
  top: 0;
  left: 0px;
  cursor: pointer;
}

.wrap .playa,
.playinga {
  margin: 0;
}

.wrap .playb,
.playingb {
  margin: 0 201px 0;
}

.wrap .playc,
.playingc {
  margin: 0 402px 0;
}

.wrap .playd,
.playingd {
  margin: 201px 0 0;
}

.wrap .playe,
.playinge {
  margin: 201px 201px 0;
}

.wrap .playf,
.playingf {
  margin: 201px 402px 0;
}

.wrap .playg,
.playingg {
  margin: 402px 0 0;
}

.wrap .playh,
.playingh {
  margin: 402px 201px 0;
}

.wrap .playi,
.playingi {
  margin: 402px 402px 0;
}

.hide {
  display: none;
}

<div class="wrap">
  <svg class="playa" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playinga" data-id="M7lc1UVf-VE"></div>
  </div>
  <svg class="playb" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingb" data-id="-QAnOs-O23c"></div>
  </div>

  <svg class="playc" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingc" data-id="drNPMrdmqMQ"></div>
  </div>

  <svg class="playd" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingd" data-id="EBEUhO5_Flk"></div>
  </div>

  <svg class="playe" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playinge" data-id="wE7khGHVkYY"></div>
  </div>

  <svg class="playf" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingf" data-id="D5WkP8JZgdw"></div>
  </div>

  <svg class="playg" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingg" data-id="eI43jkQkrvs"></div>
  </div>

  <svg class="playh" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingh" data-id="R9C5KMJKluE"></div>
  </div>

  <svg class="playi" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingi" data-id="J1gE9xvph-A"></div>
  </div>

</div>

【问题讨论】：

什么线路？ ...
图像中的那些线不是网格的一部分。它在图像本身上。网格的线条和边框是红色的。我的尝试：jsfiddle.net/g6oaht8f/72
所以从图像中删除这些行然后它就被修复了
不，它不是固定的，因为我希望红色网格线出现在图像上。现在他们在图像后面。基本上我所做的就是在 CSS Grid 中添加一个图像：线条应该是红色的，我做错了什么，无法弄清楚。 jsfiddle.net/g6oaht8f/72
没有网格线，这是您定义的背景，并且该背景被图像中的线条覆盖。所以从技术上讲没有问题，因为你决定这样做。从图像中删除线条就可以了

标签： html css css-grid

【解决方案1】：

您可以尝试使用一些渐变，以防无法更改背景图片

.wrap {
  position: relative;
  width: 600px;
  height: 600px;
  margin-top: 45px;
  border:4px solid red;
  background-color:red;
  overflow: hidden;
  border-radius: 25px;
  background: 
    linear-gradient(red,red) calc(100%/3 - 1px)   0% /4px 100%,
    linear-gradient(red,red) calc(2*100%/3 + 1px) 0% /4px 100%,
    linear-gradient(red,red) 0% calc(100%/3 - 1px)   /100% 4px,
    linear-gradient(red,red) 0% calc(2*100%/3 + 1px) /100% 4px,
    url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
  background-repeat:no-repeat;
}

<div class="wrap">
  
</div>

【讨论】：