尝试在CSS网格内添加图像 [英] Trying to add an image inside a CSS Grid
本文介绍了尝试在CSS网格内添加图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我如何将图像放入CSS网格中？
How would I be able to put an image inside a CSS Grid?
这是我正在尝试做的所有无法解决的事情。
This is all I'm trying to do and can't figure it out.
这是我在CSS网格上的尝试：
> https://jsfiddle.net/g6oaht8f/72/
但是它没有按我预期的那样工作。
But it didn’t work as I had expected it would.
在此处的图像上看不到网格。
The grid isn’t viewable over the image here.
如果网格可见，则线将为红色。
If the grid was viewable the lines would be Red.
完整代码：
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>
推荐答案
如果无法更改背景图像，您可以尝试使用一些渐变
You can try to use some gradient in case you cannot change the background image
.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>
这篇关于尝试在CSS网格内添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
