html遮罩效果mask,用CSS3 mask遮罩，在chrome有效果但是放到火狐浏览器就没有效果，请问是怎么回事？...-优快云博客

博客讲述了在实现HTML遮罩效果时，使用CSS3的mask属性在Chrome中正常工作，但在Firefox浏览器上遮罩效果失效的问题。通过分析CSS代码，特别是针对Firefox的-moz-mask属性，探讨了可能的原因和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在火狐浏览器中动画效果出来了，但是遮罩效果没有出来效果。

无标题文档

*{ margin:0;

padding:0;}

.yuan{ width:986px;

height:755px;

position:relative;

background:url(tu4.gif);

}

.yuan .yuan1 {

width: 300px;

height: 300px;

position: absolute;

background: url(tu3.jpg) no-repeat;

background-size: contain;

-webkit-mask: url(bj.png) no-repeat;

-moz-mask: url(bj.png) no-repeat;

-o-mask: url(bj.png) no-repeat;

-ms-mask: url(bj.png) no-repeat;

left: 16px;

top: 36px;

animation:t1 1.5s infinite;

}

.yuan .yuan2{

width: 300px;

height: 300px;

position: absolute;

margin-left: 200px;

margin-bottom: 100px;

background: url(tu2.jpg) no-repeat;

background-size: contain;

-webkit-mask: url(bj.png) no-repeat;

-moz-mask: url(bj.png) no-repeat;

-o-mask: url(bj.png) no-repeat;

-ms-mask: url(bj.png) no-repeat;

left: 80px;

top: 274px;

animation:t2 1.5s infinite;

}

.yuan .yuan3{

width: 300px;

height: 300px;

position: absolute;

margin-left: 110px;

background: url(tu1.jpg) no-repeat;

background-size: contain;

-webkit-mask: url(bj.png) no-repeat;

-moz-mask: url(bj.png) no-repeat;

-o-mask: url(bj.png) no-repeat;

-ms-mask: url(bj.png) no-repeat;

left: -89px;

top: 454px;

animation:t3 1.5s infinite;

}

@-webkit-keyframes t1{

0%{ top:0; }

50%{ top:25px;}

100%{ top:0;}

}

@-moz-keyframes t1{

0%{ top:0; }

50%{ top:25px;}

100%{ top:0;}

}

@-webkit-keyframes t2{

0%{ top:274px; }

50%{ top:295px;}

100%{ top:274px;}

}

@-moz-keyframes t2{

0%{ top:274px; }

50%{ top:295px;}

100%{ top:274px;}

}

@-webkit-keyframes t3{

0%{ top:454px; }

50%{ top:469px;}

100%{ top:454px;}

}

@-moz-keyframes t3{

0%{ top:454px; }

50%{ top:469px;}

100%{ top:454px;}

}