將淡入效果應用到Javascript backgroundImage更改

Question

這是我的代碼，改變了背景

document.body.style.backgroundImage = "url(img/space1.jpg)";

如何在JS中為此添加不透明度轉換？

Answer 1

您可以使用css進行此操作。 更簡單。

 document.getElementsByTagName('img')[0].src ="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRTDYDnkDr8JO6eh9_uXwwZpbHAkLbj02Tsdj3Iy2odb5vPEsXhBA";

 .item-fade{ vertical-align: top; opacity: 1; transition: opacity 1s; } .item-fade:hover{ opacity: 0.2; }

 <span> <img class="hover item-fade" src="" /> </span>

Answer 2

編輯：我已經更新了此主要評論，所以您有完整的答案:)

您不能輕易地對身體背景進行此操作。 但是，您可以通過添加div來實現此效果，例如，如下所示（z-index -1會執行“技巧”）：

<body>
  <div id="js_background_filler" class="background_filler"></div>
... rest of your body ...

然后以您的樣式/ css：

.background_filler {
  background-image: url(img/space1);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  bottom: 0;
  opacity: 0.2;
  will-change: opacity;
}

.background_filler--animate {
  -webkit-animation: fadein 2s ease-in alternate infinite;
  -moz-animation: fadein 2s ease-in alternate infinite;
  animation: fadein 2s ease-in alternate infinite;
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-moz-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

您可能想在某個背景上觸發動畫的JavaScript函數，將其擴展為：

var $element = document.getElementById('js_background_filler');
$element.classList.add("background_filler--animate");

您可以擺弄animation: fadein 2s ease-in alternate infinite; （例如，將其設置為20秒（秒）以使其變慢）。

將淡入效果應用到Javascript backgroundImage更改

問題描述

2 個解決方案

解決方案1
1 2017-01-21 21:34:20

解決方案2
1 已采納 2017-01-21 21:37:22

將淡入效果應用到Javascript backgroundImage更改

問題描述

2 個解決方案

解決方案1 1 2017-01-21 21:34:20

解決方案2 1 已采納 2017-01-21 21:37:22

解決方案1
1 2017-01-21 21:34:20

解決方案2
1 已采納 2017-01-21 21:37:22