Резервные фоны, когда изображение отсутствует

avatar
Lucas Tea
8 августа 2021 в 15:40
54
1
0

Я хочу иметь резервный фон, только если изображение, которое должно быть фоном, отсутствует.

Вот что у меня получилось: background: url(\'img/items/image.png\') , url(\'img/items/fallback.png\')

Но в этом случае оба фона отображаются одновременно. Не знаю почему.

Источник
Pointy
8 августа 2021 в 15:42
2

Именно так должен работать background-image. Вероятно, вам придется проверить доступность изображения с помощью JavaScript и обработать результаты.

Lucas Tea
8 августа 2021 в 15:49
0

но этот поток говорит, что он должен работать так, как я хочу. coderhelper.com/questions/22287474/…

Temani Afif
8 августа 2021 в 15:50
0

это не запасной вариант, а два фоновых слоя друг над другом

Temani Afif
8 августа 2021 в 15:50
0

@LucasTea прочитайте еще раз эту ветку, она не говорит того, что вы говорите

Lucas Tea
8 августа 2021 в 15:50
0

так это работает, но не с прозрачным фоном, верно?

Ozik Jarwo
8 августа 2021 в 15:51
0

Как насчет использования атрибута img src, а не фона css?

Roko C. Buljan
8 августа 2021 в 15:56
0

Почему побеги \'?

Ответы (1)

avatar
ghost rider
8 августа 2021 в 16:28
1

Как вы могли заметить из комментариев под вашим сообщением, не существует такой вещи, как запасной вариант, но вы всегда можете найти способ решить проблему. Также имейте в виду, что иногда за необычным решением всегда стоит цена: производительность, читабельность и т.д.

Для вашей ситуации я могу предложить несколько идей, как вы можете решить эту проблему:

  1. Использовать два изображения (они не должны быть прозрачными)

    background-image: url("defaultImage.png"), url("backupImage.png"); background-position: 0 0, 0 0; background-repeat: no-repeat, no-repeat;

  2. Например, используйте два вложенных элемента HTML. Стилизовать их и добавить фоновое изображение для обоих.

  3. В css добавьте псевдоэлементы через :before{content:" "; background:url(backup.png); display: block; position:absolute;}