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

yvt65v4c 于 2023-01-27 发布在其他

关注(0)|答案(3)|浏览(360)

我正在建立一个网站，我想使用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）？

css

来源：https://stackoverflow.com/questions/56622203/css-display-alternative-image-when-original-not-supported

3条答案

按热度按时间

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"/>

赞(0）回复(0）举报 2023-01-27

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（取决于方法），并相应地改变图像。

赞(0）回复(0）举报 2023-01-27

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()**作为后备，如示例所示。

赞(0）回复(0）举报 2023-01-27

我来回答

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

3条答案

相关问题

热门标签

最新问答