Существует хорошее руководство о том, что вы хотите получить на CSS Tricks:
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"/>
person
Thorsten Wolske
schedule
16.06.2019
