时间戳

首页 > 解决方案 > 使用 .png 和 webp 的 Sprite

css - 使用 .png 和 webp 的 Sprite

问题描述

我使用modernizr-custom.js 设置了.webp 和no-webp，它工作正常是许多背景图像的css。

我被困在如何将它应用到下面的代码中，并且尝试了多种方法但没有成功。谢谢你的帮助。使用下面的代码没有图像显示。仅在支持 webt 的浏览器中仅使用 .webp 图像即可，但较旧的浏览器将不支持它。

/******************************************* Sprites *******************************************/
#fancybox-close,
.SI-FILES-STYLIZED .cabinet,
.SI-FILES-STYLIZED .cabinet:hover,
.arrow-link-down,
.arrow-link-up,
.big-btn,
.big-btn:hover,
.checklink-box ul li a,
.close_button,
.crlist,
.crlist:hover,
.ez-checkbox,
.ez-checked,
.ez-radio,
.icon,
.left-col .icon,
.mid-btn,
.mid-btn:hover,
.minus,
.minus:hover,
.plus,
.plus:hover,
.search-btn,
.search-btn:hover,
.selectBox-arrow,
.tip-boxes span.triangle,
.title-icon,
a.arrow-link,
a.arrow-link-left,
a.arrow-link:hover,
a.fb-icon,
a.fb-icon:hover,
a.twitter-icon,
a.twitter-icon:hover,
div#tab-indicator,
footer#footer div.container,
li#login,
li#login>a,
nav.slides-nav ul li a {
.webp background-image: url(../img/sprite.webp);
.no-webp background-image: url(../img/sprite.png);
background-repeat: no-repeat
}

标签： csspngspritewebp

解决方案

你在错误的地方有 .webp 和 .no-webp 类，而不是......

    .....  
    nav.slides-nav ul li a {
       .webp background-image: url(../img/sprite.webp);
       .no-webp background-image: url(../img/sprite.png);
       background-repeat: no-repeat
    }

它应该是

    .....  
    .webp nav.slides-nav ul li a {
       background-image: url(../img/sprite.webp);
       background-repeat: no-repeat
    }
    .....  
    .no-webp nav.slides-nav ul li a {
       background-image: url(../img/sprite.png);
       background-repeat: no-repeat
    }

推荐阅读