Question

我正在建立一个网站，我想对图像使用WebP格式。我知道的不是not all browsers support it，所以如果不支持JPG，我想显示一个备用的WebP图像。我有一个div应用于该类：

.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');
}

如果要在不支持image.jpg的浏览器上使用网站，我想向此类添加一些内容，以显示备用WebP。 如何使用纯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解决方案，则需要为每个支持或不支持media（取决于方法）的单独浏览器使用功能检测（webp）并更改图像相应地。我建议选择一种。

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>

现在基本上，您将像这样创建课程：

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

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

对于已经停用js的客户端，甚至还有一个解决方案这需要一个内联脚本，也可以在CSS Tricks文章中找到。

您的课程如下所示：

.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的文件并声明标题：

<?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图像的类都可以通过检查来切换如果浏览器具备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');
  }";
 }
 ?>

修改

我忘记了一些东西：您可以将.php文件添加为常规.css文件到您的html：

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

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

2 个答案: