Как установить фоновое изображение с двумя альтернативными изображениями? (установить замещающее изображение, когда изображение отсутствует) - PullRequest
Новая
       6

Как установить фоновое изображение с двумя альтернативными изображениями? (установить замещающее изображение, когда изображение отсутствует)

0 голосов
/ 25 февраля 2020

Я бы хотел установить background-image. Есть два альтернативных изображения. Вот мой код. 

<a id="test" style="bakckground: url('image1.png'), bakckground: url('image2.png');">test</a>

Я хочу проверить первое изображение (image1.png), и если изображения нет, я бы хотел установить второе изображение (image2.png). И если есть первое изображение, то установите первое изображение (image1.png).

Если я поставлю вышеуказанный код, когда существуют оба изображения, то оно устанавливает оба изображения в тег ...

Я хочу проверить первое изображение, и если оно существует, я хочу установить только первое изображение. И если есть второе изображение, установите только второе изображение.

Пожалуйста, дайте мне совет, чтобы решить эту проблему ..

Если нет ответа на этот вопрос, есть ли шанс поймать jQuery событие? Я пытался отловить ошибку с помощью приведенного ниже кода, но не смог отловить ошибку .. 

$("[id='test']").error(function() {
    alert( "Handler for .error() called." )
});

Ответы [ 2 ]

4 голосов
/ 25 февраля 2020

background Возможность установить несколько фонов. 

background:url("bg1.jpg") 0 0 no-repeat,
           url("bg2.jpg") 200px 0 no-repeat

Слой bg1 находится над bg2. Если bg1 не существует, он скрыт. bg2 отображается автоматически Try

Попробуйте изменить ссылки на изображения, которые вы можете использовать 

.bg-wrap {
    width: 100px;
    height: 100px;  /* Try deleting the bg1 background url */
    background: url("https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=248222817,375547763&fm=26&gp=0.jpg") 0 0 no-repeat,
                url("https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2901784552,1261367458&fm=26&gp=0.jpg") 0 0 no-repeat
}
<div class="bg-wrap"></div>
0 голосов
/ 25 февраля 2020

Просто добавьте псевдоэлемент "before" и установите размер, аналогичный его родительскому элементу. Пожалуйста, смотрите мой код ниже. Я не знаю, хотите ли вы этого, но надеюсь, что это поможет вам. 

#test {
  color: green;
  background: url(https://dummyimagee.com/100x100/000/fff); /* wrong path */
  /* background: url(https://dummyimage.com/100x100/000/fff); */ /* correct path */
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
}

#test::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(https://dummyimage.com/100x100/ff0000/0011ff);
  z-index: -1;
}
<a id="test">test</a>
...