是否可以使用 html/javascript/css 在 img 元素中打孔？

Question

我正在开发一个网站，其中的背景部分需要透明，因为它背后的视频需要通过。 背景是一张图片。 另外，我需要确保该网站在 Opera 版本 11 上运行。

考虑到网站需要在 Opera 11 浏览器中运行，有没有办法在图像元素中创建一个洞？ <img src='http://ip/cutaholeinme.png'>

以便最终显示以下image with a hole的图像； （白色矩形应该是透明的）

Answer 1

一个mask可以轻松做到这一点

 img { -webkit-mask: linear-gradient(#fff,#fff) top / 100% 50px, /* show 50px from the top */ linear-gradient(#fff,#fff) bottom/ 100% 70px, /* show 70px from the bottom */ linear-gradient(#fff,#fff) left / 20% 100%, /* show 20% from the left */ linear-gradient(#fff,#fff) right / 40% 100%; /* show 40% from the right */ -webkit-mask-repeat:no-repeat; mask: linear-gradient(#fff,#fff) top / 100% 50px, linear-gradient(#fff,#fff) bottom/ 100% 70px, linear-gradient(#fff,#fff) left / 20px 100%, linear-gradient(#fff,#fff) right / 40px 100%; mask-repeat:no-repeat; } body { background:linear-gradient(to right,blue,red); }

 <img src="https://picsum.photos/id/1006/500/400" >

为了获得更好的支持，您可以考虑使用 SVG 蒙版：如何仅将背景应用于特定元素？

---

您还可以考虑使用多个元素的技巧，如下所示：

 .box { width: 500px; height: 400px; position: relative; background-size: 0 0; } .box div { background: inherit; height: 100%; } .box:before, .box:after, .box div:before, .box div:after { content: ""; position: absolute; background-image: inherit; background-size: 500px 400px; } .box:before, .box:after { left: 0; right: 0; } .box:before { top: 0; background-position:top; height: 20%; } .box:after { bottom: 0; background-position:bottom; height: 30%; } .box div:before, .box div:after { top: 0; bottom: 0; } .box div:before { left: 0; background-position:left; width: 40px; } .box div:after { right: 0; background-position:right; width: 80px; } body { background: linear-gradient(to right, blue, red); }

 <div class="box" style="background-image:url(https://picsum.photos/id/1006/500/400)"> <div></div> </div>