如何在一个拥有背景色的DIV上抠出一块透明的区域

[二环路老司机]

目前项目中遇到问题，如何在模块背景上抠出一块透明的区域，用来展示下方的内容，由于模块本身是半透明且从左至右颜色渐进，我们需要使用CSS来达到此标准。希望论坛内的大神们可以出谋划策。非常感谢！！

[业余草]

使用div层。z-index试一试

[二环路老司机]

不可以，事实上由于底层所展示的内容为视频，无法用z-index来提层，你可以理解为panel是视频流而上面覆盖着多个div且由于设计是透明渐变，由于在一个div上 background-color 、background-image 都有设置，且客户不同意使用整张图片来进行抠图，所以在这里遇到了问题。在线等急！！

[涛锅]

显示底层视频的一个区域？

[天际的海浪]

div改成canvas，在canvas中你想怎么抠图都行

[二环路老司机]

引用 4 楼 jslang 的回复:

div改成canvas，在canvas中你想怎么抠图都行

您好，感觉您所说的这个方法非常有用，能否写一个小的demo，几行代码就可以了，比如随便一个什么颜色的div中间抠出一个div来，最好不居中或偏左或偏右都可以，非常感谢，

[天际的海浪]

引用 6 楼 foxaiwushang 的回复:

[quote=引用 4 楼 jslang 的回复:] div改成canvas，在canvas中你想怎么抠图都行

您好，感觉您所说的这个方法非常有用，能否写一个小的demo，几行代码就可以了，比如随便一个什么颜色的div中间抠出一个div来，最好不居中或偏左或偏右都可以，非常感谢，[/quote]

<div>
<canvas id="canvasId" width="400" height="350"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var context = canvas.getContext("2d");
context.fillStyle = "#FF99FF";//设置填充色（可以是渐变色或半透明色）
context.fillRect(0,0,canvas.width,canvas.height);//填充背景我色
context.clearRect(50,100,150,100);//抠出一个矩形区域
</script>

[似梦飞花]

不明白你的意思 扔个div上去被

[二环路老司机]

引用 7 楼 jslang 的回复:

[quote=引用 6 楼 foxaiwushang 的回复:] [quote=引用 4 楼 jslang 的回复:] div改成canvas，在canvas中你想怎么抠图都行

您好，感觉您所说的这个方法非常有用，能否写一个小的demo，几行代码就可以了，比如随便一个什么颜色的div中间抠出一个div来，最好不居中或偏左或偏右都可以，非常感谢，[/quote]

<div>
<canvas id="canvasId" width="400" height="350"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var context = canvas.getContext("2d");
context.fillStyle = "#FF99FF";//设置填充色（可以是渐变色或半透明色）
context.fillRect(0,0,canvas.width,canvas.height);//填充背景我色
context.clearRect(50,100,150,100);//抠出一个矩形区域
</script>

[/quote] 厉害！真的可以！非常感谢！！！

[Pianoboy前端]

这个帖子好久了……吧我来回答吧。是几行css就可以，前提是只有一个洞，利用border属性，曲线救国。不多说了上代码。 <div style="width:200px;height:200px;border:300px solid rgba(0,0,0,0.7)"></div> 这样子就可以实现在App例如微信上面，进行扫码类似的效果。如果需要全屏，还可以获取屏幕宽高自行设置border宽度。