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

Question

对于我的移动桌面导航栏，我有背景按钮(默认)。在顶部，我使用 :after 插入一个带有背景(纯灰色)的元素，该元素在悬停时变为(lt.blue)和内容(url(image.alpha-png))或-webkit-mask-image。

我正在寻找一种在不支持 :after 或无法处理 -webkit-mask-image 的浏览器/设备上不显示任何内容(=默认背景图像)的方法。

我通过删除后备背景颜色(处理 IE 7,8)让它为伪类工作，现在我正在寻找一种方法，不在浏览器/设备上显示灰色/蓝色背景不支持 -webkit-mask-image(或者它们不工作 -o/-ms/-moz-equivalents)

这是一些代码:

HTML:

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

CSS(我为所有其他浏览器保留了渐变和 mask 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");
              }

由于 -webkit 是唯一提供图像 mask 的供应商，我正在寻求帮助:

• 在非 webkit 设备上隐藏背景渐变
• 提供一些关于 FF、Opera 的良好替代方案的信息...
• 关于为 alpha-png 切换 image-mask 是否有意义的意见，这意味着必须创建我的 CSS-sprite 的“负片”

感谢您的帮助!

Answer 1

好的。只有 webkit 支持图像 mask ，因此要获得 mask 效果，您可以使用

a) SVG 图像 = 您需要在 IE 中加载 SVG 插件 b) 抠图PNG图片

我从背景图像中剪下了 png 形状

示例参见 here