Question

对于我的移动桌面导航栏，我有背景按钮（默认）。最重要的是我正在使用：之后插入一个背景元素（纯灰色），它在悬停时变为（lt.blue）和content（url（image.alpha-png））或-webkit-mask-image。

我正在寻找一种在不支持的浏览器/设备上显示任何内容（=默认背景图片）的方法：在能否处理-webkit-mask-image之后。

我通过删除后备背景颜色（照顾IE 7,8）让它为伪类工作，现在我正在寻找一个不显示浏览器/设备上的灰色/蓝色背景不支持-webkit-mask-image（或者它们不工作-o / -ms / -moz-equivalent）

以下是一些代码：

HTML：

<p class="test">target</p>

CSS（我放弃了所有其他浏览器的渐变和掩码CSS）：

 .test    { position: relative;}
p.test:after  { width: 30px; height: 30px; position: absolute; 
                top: 0; bottom: 0; left: 0; right: 0; content: "";
                -webkit-mask-image:      url("../../../IMG/gen/testsprite.png");
                -webkit-mask-position:   -60px -15px;
                -webkit-mask-repeat:     no-repeat;
                -webkit-mask-size:       150px 45px;                    
                background-image: -webkit-linear-gradient(bottom, #ccc, #333);
              }
p.test:hover:after  {
               -webkit-linear-gradient(center top, rgba(68,213,254,.0) 0%, rgba(68,213,254,.0) 23%, #44D5FE 100%), 
               -webkit-radial-gradient(100% 320%, circle farthest-corner, #317BDC 65%, #317BDC 78%, rgba(49,123,220,.0) 80%), 
               -webkit-radial-gradient(40% 190%, circle farthest-corner, #7DAAE7 30%, #E6EEFA 90%), url("../../../IMG/gen/fallback_active.png");
              }

As -webkit是唯一提供图像掩码的供应商，我正在寻求帮助：

将背景渐变隐藏在非webkit设备上
提供一些关于FF，Opera的好选择的信息......
关于为alpha-png切换图像蒙版是否有意义的意见，这意味着必须创建我的CSS-sprite的“负面”

感谢您的帮助！

Answer 1

确定。只有webkit支持图像掩码才能获得屏蔽效果，您可以使用

a）SVG images =你需要在IE中加载SVG插件 b）剪切PNG图像

我选择从背景图像中删除png形状

示例请参阅here

CSS：不支持CSS3图像掩码和/或伪元素的设备的自动回退/解决方法

1 个答案: