Блог

Главная - Вопросы по программированию - Фоновый переход не работает в Mozilla Firefox

Фоновый переход не работает в Mozilla Firefox

#css

#css

Вопрос:

Я искал решение этой проблемы везде, но, похоже, не могу заставить его работать… Я меняю фоновое изображение с помощью JS, и я хочу, чтобы оно исчезало при изменении. Он безупречно работает в Chrome и Edge, но в Firefox его нет.

Вот код, который я использую :

 document.getElementById("main").style.backgroundImage = "url('../images/bg1.png')";
  
 #main {
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    width: 100%;
    height: 919px;
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
}

  
 <div id="main">blabla</div>

Я пытался использовать background: none; в css или что-то еще, но все равно ничего … в других потоках, похоже, нет решения ни в Google. Я в растерянности в этой ситуации.

Комментарии:

1. Вы проверяли кэш браузера?

2. @mohammad Я нажал CTRL F5, если вы это имели в виду, я использую Live Share Visual Studio для мгновенного просмотра веб-сайта. Он работает в Chrome и Edge, только Firefox создает проблему: (

3. mabye нажмите shift значок перезагрузки — это очищает кеш и перезагружает страницу (в firefox)

Ответ №1:

если ваша цель состоит в том, чтобы при загрузке или перезагрузке страницы фоновое изображение отображалось с эффектом затухания, я изменил коды javascript и css, как показано ниже:

 let mainElem = document.getElementById("main");

function showBack() {
  
  setTimeout(function() {
    mainElem.style.opacity = 1;
  }, 1000)

 }  
 #main {
    border: 1px solid #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 919px;
    background-image: url('04.jpg');
    opacity: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
   <button onclick="showBack()">click me</button>
   
      <div id="main">
        blabla
      </div>
    
    
    <script src="javacode.js"></script>
</body>
</html>

Я использовал метод setTimeout javascript, который запускает функцию через 1 секунду. и поскольку вы хотите иметь эффект затухания, необходимо добавить «непрозрачность: 0» в вашу таблицу стилей и переход. затем в коде js вы меняете непрозрачность только с 0 на 1. вам нужно «заменить» URL вашего изображения в коде css.

вот ссылка для лучшего понимания метода setTimeout: https://www.w3schools.com/jsref/met_win_settimeout.asp

Комментарии:

1. Привет, большое спасибо за код, я не знал об этом! К сожалению, мой текущий код предназначен для одностраничного приложения, и предполагается, что фон меняется при нажатии кнопки (которая изменяет раздел), поэтому он не перезагружает страницу: (

2. это не очень сложно, вам нужно только добавить кнопку в свой html и вызвать функцию при нажатии на кнопку. Я обновил последний код, чтобы сделать это.