我怎样才能将图像放入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>
如果无法更改背景图像,可以尝试使用某种渐变
.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>