HTML – 在Firefox中转换为背景图像?
发布时间:2020-12-14 22:30:49 所属栏目:资源 来源:网络整理
导读:我想找到一个替代方案: “转型:背景图片1s无论什么” 在Firefox中,因为它只适用于webkit浏览器. 我已经尝试了不透明度替代品,但这对我来说不是一个选项,因为我在背景容器上有内容,如果使用不透明度,它将与背景一起消失. 谢谢. 解决方法 你可以使用2个伪元
我想找到一个替代方案:
“转型:背景图片1s无论什么” 在Firefox中,因为它只适用于webkit浏览器. 我已经尝试了不透明度替代品,但这对我来说不是一个选项,因为我在背景容器上有内容,如果使用不透明度,它将与背景一起消失. 谢谢. 解决方法
你可以使用2个伪元素来做到这一点
CSS .test { width: 400px; height: 150px; position: relative; border: 1px solid green; } .test:before,.test:after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 1; } .test:before { background-color: red; z-index: 1; transition: opacity 1s; } .test:after { background-color: green; } .test:hover:before { opacity: 0; } fiddle with real images (悬停过渡) 为了能够看到div内容,伪元素需要在负z-index中: fiddle with corrected z-index 看起来IE不会触发这个悬停 .test:hover:before { opacity: 0; } 但会触发这一个 .test:hover { } .test:hover:before { opacity: 0; } (如同SILLY似乎) fiddle for IE10 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |