web版bluejeans如何设置虚拟背景
发布网友
发布时间:2022-12-19 00:11
我来回答
共1个回答
热心网友
时间:2023-09-19 14:24
1.自适应的实现:
设置div标签padding-top为百分比,padding和margin百分比值是依据宽度计算的而非屏幕高度,所以可以依此设置一个自适应的区域,比如图片信息如下
web前端开发中如何实现背景虚化但内容清晰且自适应
那么高宽比例为:540/1024 大概为52.734%,也就是高度为宽度的52.734%,这里宽度设置为100%,那么宽度的padding-top即为52.734%*100%
2.背景虚化内容清晰的实现:
设置两个层,一个是背景虚化层,自适应撑起整个外层div容器,通过filter:blur()属性设置虚化值,另一个为内容层,绝对定位,设置z-index提高内容层层次防止被遮挡,这样内容层不受虚化影响