0

对于我的移动桌面导航栏，我有背景按钮（默认）。在顶部，我使用 :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（我为所有其他浏览器保留了渐变和蒙版 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 是唯一提供图像掩码的供应商，我正在寻求以下帮助：

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

感谢帮助！

4

1 回答 1

1

行。只有 webkit 支持图像掩码，所以要获得掩码效果，您可以使用

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

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

例子见这里

于 2011-08-28T06:48:38.587 回答