24淘宝网站建设,宁波网站建设网络推广,海外广告投放平台,站长统计下面的ABCDE是混合图层#xff0c;box是他们的父级#xff0c;一般浏览器支持都没什问题需要注意的是#xff0c;确保父元素不是透明的#xff0c; 我使用的时候发现给父元素rgba设置透明度这种方式没啥作用#xff0c;还得是纯色#xff0c;没去深究#xff0c;设置纯色… 下面的ABCDE是混合图层box是他们的父级一般浏览器支持都没什问题需要注意的是确保父元素不是透明的 我使用的时候发现给父元素rgba设置透明度这种方式没啥作用还得是纯色没去深究设置纯色后我通过z-index将父元素降低到其他的下面去了子元素升高以此让纯色背景不影响其他使用注意元素我是定位的单纯的设置z-index有可能导致全部不出现 div classboxdiv classbox-A/divdiv classbox-B/divdiv classbox-C/divdiv classbox-D/divdiv classbox-E/div/div样式大概这个样子.boxposition: relative;width: 100%;height: 100%;background: black;.box-Amix-blend-mode: soft-light;position: absolute;z-index: 3;.box-Bmix-blend-mode: soft-light;position: absolute;z-index: 4;.box-Cposition: absolute;z-index: 5;.box-Dmix-blend-mode: overlay;position: absolute;z-index: 6;.box-Eposition: absolute;mix-blend-mode: color-burn;z-index: 7;混合属性mix-blend-mode不生效可能有以下几个原因
1. 元素没有设置position属性或者z-index属性导致混合模式无法生效。 2. 元素的父元素设置了overflow:hidden属性导致元素的混合模式被裁剪掉了。 3. 元素的背景色是透明的导致混合模式无法生效。 4. 元素的混合模式与其父元素的混合模式冲突导致混合模式无法生效。 5. 浏览器不支持该混合模式导致混合模式无法生效。
解决方法
1. 确保元素设置了position属性和z-index属性并且父元素没有设置overflow:hidden属性。 2. 确保元素的背景色不是透明的。 3. 调整元素的混合模式避免与父元素的混合模式冲突。 4. 检查浏览器是否支持该混合模式如果不支持可以考虑使用其他混合模式或者使用图片代替。 属性含义 mix-blend-mode:normal;//正常mix-blend-mode:multiply;//正片叠底mix-blend-mode:screen;//滤色mix-blend-mode:overlay;//叠加mix-blend-mode:darken;//变暗mix-blend-mode:lighten;//变亮mix-blend-mode:color-dodge;//颜色减淡mix-blend-mode:color-burn;//颜色加深mix-blend-mode:hard-light;//强光mix-blend-mode:soft-light;//柔光mix-blend-mode:difference;//差值mix-blend-mode:exclusion;//排除mix-blend-mode:hue;//色相mix-blend-mode:saturation;//饱和度mix-blend-mode:color;//颜色mix-blend-mode:luminosity;//亮度mix-blend-mode:initial;mix-blend-mode:inherit;mix-blend-mode:unset;-–– 浏览器支持大概这个样子
