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

发布于 2024-11-29 03:00:47 字数 1648 浏览 4 评论 0原文

对于我的移动桌面导航栏，我有背景按钮（默认）。在顶部，我使用 :after 插入一个具有背景（纯灰色）的元素，该元素在悬停时更改为（浅蓝色）和内容（ 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 精灵的“负片”

感谢您的帮助！

原文

For my mobile-desktop nav-bar I have background buttons (default). On top I'm using :after to insert an element with background (plain grey) which on hover changes to (lt. blue) and content( url(image.alpha-png) ) or -webkit-mask-image.

I'm looking for a way to show nothing (=default background image) on browsers/devices not supporting :after or not being able to handle -webkit-mask-image.

I got it to work for pseudo-classes by removing fallback background-colors (takes care of IE 7,8)and now I'm looking for a away to not show the the gray/blue background on browsers/devices that don't support -webkit-mask-image (or their not working -o/-ms/-moz-equivalents)

Here is some code:

HTML:

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

CSS (I left away the gradient and mask CSS for all other browsers):

 .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 is the only vendor providing a image-mask, I'm looking for help on:

hiding the background-gradients on non webkit devices
providing some info on a good alternative for FF, Opera...
opinion on whether it would make sense to switch image-mask for alpha-png, which means having to create a "negative" of my CSS-sprite

Thanks for help!

分享到QQ

分享到微博