Для моей панели навигации на мобильном телефоне у меня есть фоновые кнопки (по умолчанию). Сверху я использую: after для вставки элемента с фоном (простой серый), который при наведении курсора меняется на (lt. Blue) и content (url (image.alpha-png)) или -webkit-mask-image.
Я ищу способ ничего не показывать (= фоновое изображение по умолчанию) в браузерах / устройствах, не поддерживающих: после или без возможности обработки -webkit-mask-image.
Я заставил его работать для псевдоклассов, удалив запасные фоновые цвета (заботится о IE 7,8), и теперь я ищу, чтобы не показывать серый / синий фон на браузерах / устройствах, которые не поддерживает -webkit-mask-image (или их не работают -o / -ms / -moz-эквиваленты)
Вот код:
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-спрайта
Спасибо за помощь!