CSS：如何使用元素（而不是图像）创建背景剪切图？
我试图创建一种“窗口”效果，其中位于所有其他元素之上的 div 就像一个通过位于其正下方的覆盖（背景颜色）元素的窗口。
我希望文本能够显示出来，就好像您是透过窗户看。在不使用图像的情况下如何做到这一点？
解决方案：
一种解决方案是创建一个非常宽的半透明边框。但是，该方法会影响整体尺寸（或尺寸的外观）。
另一种解决方案（我正在使用的解决方案）是设置半透明 box-阴影 具有很大的分布，消除了对单独的覆盖 div 的需要。
#cutout {
box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
}
I am trying to create a sort of "window" effect where the div positioned above all the other elements is like a window through the overlay (background color) element positioned exactly below it.
Here is an example of what I mean.
I would like the text to show through as if you were looking through a window. How can this be done without the use of images?
Solution:
One solution is to create a very wide semi-transparent border. However, that approach affects the overall dimensions (or appearance of dimensions).
An alternative solution (the one that I am using) is to set a semi-transparent box-shadow
with a large spread, eliminating the need for a separate overlay div.
#cutout {
box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
据我了解，这可能就是您想要的
http://jsfiddle.net/VRLNJ/2/
As per i understand may be that's you want
http://jsfiddle.net/VRLNJ/2/
像这样的东西
http://jsfiddle.net/amkrtchyan/VRLNJ/3/
somthing like this
http://jsfiddle.net/amkrtchyan/VRLNJ/3/
我最近对我的项目有同样的想法，这个所谓的剪切不起作用。透明窗口仍然是上面的一层，如果你可以看到并滚动，你就不能“触摸”下面的层，例如，如果你下面有一个
I came with the same idea recently for my project and this so called cut out doesn't work.The transparent window is still a layer above and if you can see and scroll you can't 'Touch' the layer bellow for example if you have <a herf="> underneath.
I would happy if someone show a real cut out. Something like select the area and delete it so only frame will left.