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

yvt65v4c  于 2023-01-27  发布在  其他
关注(0)|答案(3)|浏览(350)

我正在建立一个网站,我想使用WebP的图片。我知道不是所有的浏览器都支持它,所以如果不支持WebP,我想显示一个替代的JPG图片。我有一个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');
}

我想在这个类中添加一些东西,如果在不支持WebP的浏览器上使用网站,它会显示一个替代的image.jpg我如何实现这一点(使用纯CSS)?

zwghvu4y

zwghvu4y1#

有一个很好的指南,你想获得的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技巧文章以及。
您的类将如下所示:

.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');
  }";
 }
 ?>
    • 编辑**

我忘了一件事:您可以像添加normale.css文件一样添加. php文件到html中:

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

9udxz4iz2#

您可以使用HTML picture元素定义图像源,如下所示:

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

在这种情况下,如果浏览器支持webp图像,那么图像就应该是webp图像,否则它将使用经典的jpg版本。
如果你想要一个纯css的解决方案,你需要对每一个浏览器使用特性检测(media),无论是支持还是不支持webp(取决于方法),并相应地改变图像。

wj8zmpe1

wj8zmpe13#

它可以通过image-set()的纯CSS来完成。

    • 编辑2023年1月**

type选项在Chromium中还没有正确实现,所以现在还不能使用,但是我把这个答案留在这里,这样将来它可能会有用。

    • 编辑2023年1月**

参见MDN网络文档https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set
示例:

.box {
  background-image: url("large-balloons.jpg");
  background-image: -webkit-image-set(
    "large-balloons.avif" type("image/avif"),
    "large-balloons.jpg" type("image/jpeg")
  );
  background-image: image-set(
    "large-balloons.avif" type("image/avif"),
    "large-balloons.jpg" type("image/jpeg")
  );
}

在这个例子中,回退格式是jpg,所需的现代格式是avif,image-set()让你定义一个优先顺序。
对于所有还不知道image-set()的浏览器,您可以在**image-set()之前放置url()**作为后备,如示例所示。

相关问题