как установить другой формат фонового изображения (png и webp) одного и того же изображения в теге section - PullRequest
Новая
       71

как установить другой формат фонового изображения (png и webp) одного и того же изображения в теге section

0 голосов
/ 27 июня 2019

Я начал использовать изображения webp на своем сайте с тегом <picture>. все установлено, кроме этого 

<section class="sec-bg" style="background: url('images/bg.jpg');">

Я не знаю, как установить другой формат фонового изображения (png и webp) для одного и того же изображения. Пожалуйста, дайте решение для этого встроенного CSS в теге section.

для других изображений, я использую код ниже 

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

1 Ответ

0 голосов
/ 27 июня 2019

Пробовали ли вы приведенное ниже правило CSS? 

background-image: url('img/image1.webp'), url('img/image1.jpg');

Учитывая, что оба изображения одинаковы, будет использовано второе, если первое не существует.Таким образом, он действует как «резервное изображение».

Встроенное решение может быть 

<section class="sec-bg" style="background-image: url('img/image1.webp'), url('img/image1.jpg');">
...