WEBP图像回退

2024-07-04

我在互联网上搜索了很多,找不到可以完整教授的正确示例或完整教程。所以请大家给我推荐一些好的例子。

我已经在很多网站上尝试过 WEBP 代码,例如与现代化工具一起使用、检查浏览器支持或使用背景图像。


有一篇关于 Stucox 的文章,您可以在其中找到一些使用带有 Modernizr 和后备图像的 WebP 图像的示例。这应该可以解决您的问题。

/* Result pending */
.js .container {
   background-image: none;
}
/* No JS / WebP not supported */
   .no-js .container,
   .js.no-webp .container {
   background-image: url('image.jpg');
}
/* WebP supported */
   .js.webp .container {
   background-image: url('image.webp');
}

http://www.stucox.com/blog/using-webp-with-modernizr/ http://www.stucox.com/blog/using-webp-with-modernizr/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

WEBP图像回退 的相关文章

  • 发送抓取请求以获取 torrent 的种子和同级

    我一直在尝试创建一个 torrent 网站 但我遇到了以下问题 如何发送 torrent 抓取请求以获取其播种者和水蛭 我有一个 PHP 类函数 它为我提供公告列表 public function getTrackers Load trac
  • 如何在引导程序使用jquery中单击另一个链接时更改活动类?

    我有一个 html 作为侧边栏 并使用Bootstrap ul class nav nav list li class active a href Link 1 a li li a href link2 Link 2 a li li a h
  • 如何在新窗口中获取dom元素?

    JavaScript 中的一个简单任务是打开一个新窗口并在其中写入 但我需要在一个dom元素中写入一个带有ID的div var novoForm window open somform html wFormx width 800 heigh
  • for循环中的appendChild只添加1个孩子

    在 JavaScript 中 我使用 HTML 表格创建一个网格 您在 Photoshop 中看到的网格类型 网格大小是可变的 即可以由用户更改 因此必须计算每个网格方块的大小并将其除以可用像素数以获得精确大小的网格 我已经完成了所有这些
  • angularjs表单重置错误

    我正在尝试使用 angularjs 制作一个带有验证的表单 到目前为止我做得很好 但是 当我提交重置按钮时 除了从验证部分收到的错误消息之外 所有字段都会重置 当我重置表单时 如何删除所有字段和错误消息 这就是我按下重置按钮时的情况 这是我
  • HTML 文本和密码输入字段的大小不同 Internet Explorer

    我正在为我的登录表单使用此表单设置 tr td class label Username td td td tr
  • 为什么需要@babel-core

    我是 Babel 和 JS 的新手 我想知道何时以及为何使用 babel core 包而不是 babel cli From 巴贝尔官方文档 https babeljs io docs en Babel是一个工具链 主要用于转换ECMAScr
  • 根据所选付款方式更改 WooCommerce 提交结帐按钮文本

    I tried 更改 WooCommerce 中特定付款方式的结帐提交按钮文本 https stackoverflow com questions 45739331 change checkout submit button text fo
  • 两个选择框重叠

    我有两个选择框HTML 一个在另一个之下 第一个选择框正常 第二个选择框默认打开 意味着无需单击即可显示选项 现在当我点击第一个select box它的内容移动到另一个的后面select box HTML
  • 如何根据内容使 iframe 100% 高度

    我看到很多人问如何使 iframe 100 高度 使用一些 CSS 可以轻松归档 它将使 iframe 相对于设备屏幕 100 显示 但是如何让iframe根据其内容100 高度呢 这是我当前根据设备屏幕制作 100 iframe 的代码
  • 检查纬度和经度是否在谷歌地图圆内

    以下是我正在寻找的期望结果 我想知道的是 我使用中心点纬度和周围半径创建了圆 现在我想知道 如何检查 计算 纬度和经度是否在该区域之内或之外 如果您能给我 JavaScript 代码示例 我将不胜感激 我正在使用 Google 地图 API
  • 如何延迟显示/隐藏引导工具提示?

    我无法使 Twitter 引导工具提示的数据延迟属性正常工作 我使用它的方式如下 这是我的使用方法 a href with delay a 但我没有看到显示 隐藏有任何延迟 有什么想法吗 最后我让它与数据属性一起工作 data delay
  • Chart.js 忽略画布高度和宽度

    继Chart js 文档 http www chartjs org docs getting started creating a chart我正在尝试绘制一个小图表
  • 垂直对齐到另一个 div 的动态高度?

    我正在尝试将一个 div 与高度动态的相邻 div 垂直对齐 我遇到的大多数方法都要求我知道父 div 的高度 但如果你看我的例子 就会发现是 右 div 驱动了整个部分的高度 我试图让 div 左 中的文本垂直居中显示在右侧的 div 上
  • 为移动设备设计网页界面

    如何使您的网站在标准浏览器和各种可用的移动设备上看起来都很好 目前 我尚未决定是尝试调整布局大小以使其适用于小型设备 还是为移动设备提供单独的 CSS 我的用例是一个国际象棋游戏 我希望整个棋盘都可用而无需向下滚动 你会推荐什么 基本上没有
  • 如何获取对象类型

    在我的 Google Apps 脚本应用程序中 我看到以下错误 脚本已完成 但返回值不是受支持的返回类型 如何找出我返回的值的类型 我试过 typeof obj 但我得到的只是它是一个对象 仅当缓存为空并且从电子表格加载数据时才会发生此错误
  • Laravel 4 中的图标链接

    有人可以帮忙重写这个 从 HTML 到 Laravel4 吗 a href index php span i class icon home i span Home a 该页面的路由名称只是 我知道如何在 Laravel 中编写简单的链接
  • WEBP图像回退

    我在互联网上搜索了很多 找不到可以完整教授的正确示例或完整教程 所以请大家给我推荐一些好的例子 我已经在很多网站上尝试过 WEBP 代码 例如与现代化工具一起使用 检查浏览器支持或使用背景图像 有一篇关于 Stucox 的文章 您可以在其中
  • 在 javascript/jquery 中从 JSON 中删除元素

    我在 javascript 中从 JSON 对象删除数据时遇到问题 我正在动态创建此 JSON 并且删除也将动态进行 下面是我的 JSON 和我所处的情况 brands 51 2046 53 67 64 现在 我必须从中删除 53 我正在使
  • 如何转义 XML 中的 & 符号,以便它们在 HTML 中呈现为实体?

    我有一些 XML 文本希望在 HTML 页面中呈现 该文本包含一个 符号 我想在其实体表示中呈现它 amp 如何在源 XML 中转义这个 符号 我试过 amp 但这被解码为实际的 符号 即在 HTML 中无效 https stackover

随机推荐

  • Twilio:设置拨出电话小部件的电话号码

    在下面的小部件中 要呼叫的号码 字段无法编辑 那么 我们如何设置需要拨打的电话号码的值 你无法改变NUMBER TO CALL在本例中 在 Twilio Studio 中 The contact channel address 值作为To当
  • 我应该使用哪个 Emacs 邮件包? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我对 GNU Emacs 附带的 显然 有能力的邮件读写软件包的数量感到不知所措 更不用说第 3 方的软件包了 我什至不知道从哪里开始 所以让我只说一
  • 创建自定义 Google Now 卡片

    Google 为 Google Now 提供了各种 卡片 http www google com landing now http www google com landing now 可以创建自己的卡片吗 该系统看起来非常模块化 但我还没
  • 导航回 ViewController 时出现重复消息问题

    我有一个 ViewController 它向用户显示更多信息 然后他们单击一个按钮 它将它们发送到我的 messageView 它是一个 JSQ ViewController JSQViewController 使用集合视图类 当用户导航回
  • appcompat 在操作栏中显示进度导致 NPE

    将我的 SDK 更新到所有最新的 Android 5 0 后 我无法使用 appcompat 中 ActionBar 中内置的进度条 我已经完成了所有通常的修复 将 supportRequestWindowFeature 调用移至 setC
  • 是否可以将代码分析警告的格式设置为正常警告的格式?

    I like the code analysis included in VS2012 But it s a bit annoying that the warnings are only processable in the Code A
  • Qt:如何处理用户按下“X”(关闭)按钮的事件?

    在 Qt 中 与用户单击窗口框架的 X 关闭 按钮 即此按钮 事件相对应的插槽是什么 如果没有这个插槽 在用户按下关闭按钮后是否有其他方法来触发功能 如果你有一个QMainWindow你可以覆盖closeEvent method inclu
  • 我是否需要显式关闭并处置 SQLConnection?

    SqlDataReader rdr null con new SqlConnection objUtilityDAL ConnectionString using SqlCommand cmd con CreateCommand try i
  • MySQL 连接器错误“服务器时区值中欧时间”[重复]

    这个问题在这里已经有答案了 我的问题 MySQL 连接器 服务器时区值中欧时间 无法识别或代表多个时区 该项目 小型网络项目 JavaEE Tomcat 8 5 MySQL Maven 我的尝试 Maven gt 将 MySQL 连接器从
  • 无法在角度2中实现PUT请求,出现错误“不允许空值”

    我已经在我的应用程序中实现了 GET 请求 并且能够在账户组件 当我单击中的特定行时DataGrid 我得到一个POPUP我可以在其中访问 row data 的窗口 并使用下拉菜单可以更新 DataGrid 但是 当我为下拉列表选择所需的值
  • 通过PID获取进程句柄

    我想通过进程名称获取进程的句柄 我有 PID 但当我使用openProcess要始终获取句柄 它将返回 0 或 180 这是我用来使 PID 正常工作的函数 Handle OpenProcess PROCESS QUERY INFORMAT
  • 以编程方式使 iPhone 振动 [重复]

    这个问题在这里已经有答案了 可能的重复 让 iPhone 振动 https stackoverflow com questions 4724980 making the iphone vibrate 如何以编程方式使 iPhone 振动 任
  • Xamarin Form - 如何更改 ResourceDictionary 中的 TabbedPage 标题字体大小

    我创建了一个TabbedPage有四个ContentPages as the TabbedPage Children with Title The TitleiOS应用程序中呈现的内容非常完美并且能够阅读 然而 在 Android 中似乎T
  • R中逻辑回归的分类表

    我有一个由二分因变量组成的数据集 Y 和 12 个自变量 X1 to X12 存储在 csv 文件中 这是数据的前 5 行 Y X1 X2 X3 X4 X5 X6 X7 X8 X9 X10 X11 X12 0 9 3 86 111 126
  • 如何在cmd / powershell中运行Nuget Package Manager Host

    我目前正在使用更新包Visual Studio 2017 Nuget 包管理器控制台中的命令 我需要从命令提示符使用它 eg nuget Update Package Newtonsoft Json Visual Studio 的包管理器控
  • DynamoDB 中的 UUID 数据类型

    根据规范 UUID 为 128 位或 16 字节 十六进制表示形式为 36 个字符 包括连字符 我正在 DynamoDB 上构建一个新表 并且必须决定计划用 UUID 填充的哈希键的类型 我应该使用这些 UUID 的字符串或二进制哈希键创建
  • 以全屏模式启动 Microsoft Edge

    我正在修理几台用作数字标牌的计算机 因此 我需要一个脚本来在启动时全屏启动 Microsoft Edge 我在设置中设置为默认网站 但我不知道如何全屏启动应用程序 有什么想法吗 通过更改发布的脚本https superuser com qu
  • 检测 gzip 编码以手动解压缩响应,但缺少“Content-Encoding”标头

    我在用net http在 Go 中创建一个库HTTP GET要求 在响应中 我收到 12 个标头 但是当我通过邮递员运行完全相同的查询时 我得到 16 个标头 其中缺少的一项是 内容编码 我明白这一定是一个CORS https develo
  • 在 EF core 中启用迁移吗?

    我正在开始使用 EF Core 2 0 我有一个针对 NET 4 6 1 的控制台应用程序 我有一个非常简单的模型类 以及这个上下文 public class ContextCore DbContext protected override
  • WEBP图像回退

    我在互联网上搜索了很多 找不到可以完整教授的正确示例或完整教程 所以请大家给我推荐一些好的例子 我已经在很多网站上尝试过 WEBP 代码 例如与现代化工具一起使用 检查浏览器支持或使用背景图像 有一篇关于 Stucox 的文章 您可以在其中