Question

这是我改变背景的代码

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

如何在JS中添加不透明度转换？

Answer 1

您可以使用<div class="main"> <div class="left"> left </div> <div class="middle"> middle </div> <div class="right"> right </div> </div>执行此操作。这更简单。

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;
}

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 个答案: