CSS

Question

我正在建立一个网站，我想为我的图像使用 WebP 格式。我知道 not all browsers support it，所以如果 WebP 不受支持，我想显示另一个 JPG 图像。我有一个 div 应用了这个 class:

.my-class{
    background: linear-gradient(to right bottom, rgba(89, 167, 255, 0.5), rgba(0, 31, 62, 0.7)), url('../assets/images/image.webp');
}

我想向此 class 添加一些内容，以便在不支持 WebP 的浏览器上使用该网站时显示替代 image.jpg。 我怎样才能做到这一点（使用纯CSS）？

Answer 1

您可以使用 HTML picture 元素来定义图像的来源，如下所示：

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
  <img src="image.jpg">
</picture>

在这种情况下，如果浏览器支持 webp 图片，图片将照原样使用，否则将采用经典 jpg 版本。您显然需要同时拥有这两个版本。

如果您想要一个纯粹的 css 解决方案，您将需要为每个支持或不支持 webp 的浏览器使用功能检测 (media)（取决于方法）并相应地更改图像。我建议选项一。

Answer 2

有一个很好的指南可以满足您的需求获得 CSS 技巧：

https://css-tricks.com/using-webp-images/

纯 css 不是解决这个问题的最佳方法，你必须检测客户端是否支持 webp css 不会这样做。

因此您需要 Modenizr 作为示例来检测客户端是否支持webp

https://modernizr.com/download?setclasses

在你选择了你需要的东西 (webp) 之后你会得到一个小的js文件。将它添加到您的页面，例如：

<!DOCTYPE HTML>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <script src="js/modernizr-custom.js"></script>
  </head>

现在基本上您将像这样创建 class：

 .no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
  }

 .webp .elementWithBackgroundImage{
  background-image: url("image.webp");
  }

即使客户端停用了js但也有解决办法这需要一些内联脚本，也可以在 CSS 技巧文章中找到。

您的 class 看起来像这样：

.no-webp-my-class .elementWithBackgroundImage{
background: linear-gradient(to right bottom, rgba(89, 167, 255, 0.5), rgba(0, 31, 62, 0.7)), url('../assets/images/image.jpg');
 }
.my-class .elementWithBackgroundImage{
background: linear-gradient(to right bottom, rgba(89, 167, 255, 0.5), rgba(0, 31, 62, 0.7)), url('../assets/images/image.webp');
 }

编辑

还有另一种方法，但需要一些工作 php。基本上它只不过是一个浏览器开关，你必须溢出你的样式表。

为了方便起见，创建一个名为 stylesheet.php 或其他名称的文件并声明 header:

<?php 
  header("Content-type: text/css;charset=UTF-8");

为了节省一些工作，此解决方案将读取现有的 .css 文件并将其作为回显发出：

<?php 
  header("Content-type: text/css;charset=UTF-8"); 
  $file_read = fopen("stylesheet.css","r+");
    while(! feof($file_read))  {
    $css= fgets($file_read);
    echo "$css";
    }

现在所有使用webp图片的classes都可以通过勾选来切换如果浏览器 exept webp.

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
// webp is supported!
 }
 else {
 // webp is not supported!
}

这会导致：

<?php 
  header("Content-type: text/css;charset=UTF-8"); 
  $file_read = fopen("stylesheet.css","r+");
    while(! feof($file_read))  {
    $css= fgets($file_read);
    echo "$css";
    }
if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
 echo "
 .my-class .elementWithBackgroundImage{
  background: linear-gradient(to right bottom, rgba(89, 167, 255, 0.5), rgba(0, 31, 62, 0.7)), url('../assets/images/image.webp');
  }";

 }
 else {
 echo "
 .my-class {
  background: linear-gradient(to right bottom, rgba(89, 167, 255, 0.5), rgba(0, 31, 62, 0.7)), url('../assets/images/image.jpg');
  }";
 }
 ?>

编辑

我忘记了一件事：您可以像添加普通 .css 文件一样添加 .php 文件给你的html：

<link rel="stylesheet" type="text/css" href="stylesheet.php" media="screen"/>

CSS - 不支持原始图像时显示替代图像

CSS - Display Alternative Image When Original Not Supported

image

webp