如何让div的不透明背景图像逐渐改变[重复]答案

【问题标题】：How to have the opacity background image of a div to be gradually changed [duplicate]如何让div的不透明背景图像逐渐改变[重复]
【发布时间】：2021-10-06 21:33:07
【问题描述】：

假设我有一个div 元素，我希望背景颜色元素（不是文本）的不透明度在给定的时间内逐渐增加（不是立即改变），其中初始不透明度为 0 ，并且结束不透明度为 1 或更小的小数，例如 0.7。

例如，我希望 div 的背景颜色在 3 秒内从 rgba(90, 129, 229, 0) 变为 rgba(90, 129, 229, 3)。

我尝试设置不透明度值@keyframes，但我希望它只针对背景颜色。

我想要一个普通 HTML 和 CSS 的解决方案。谢谢。如果问题的解释过于简单，需要更多信息，请告诉我。

【问题讨论】：

你有悬停、点击等触发器吗？或者您只是希望在页面加载后发生这种情况？
抱歉，我要求在固定的时间内逐渐改变不透明度，比如 3 秒。 @Mahdi，我打算通过我的 JS 文件中的函数触发，所以不，不一定在页面加载之后..
如果它只是一个纯色背景色，你想从透明淡化到一定的不透明度，那么你可以使用过渡或关键帧动画（取决于用例，更多信息会有所帮助） .您将初始颜色设置为某个 rgba 值，其中 rgb 是您的颜色值，a 是您的 alpha/opacity。初始 a 将为 0。结束值将是具有不同 a 值的相同 rgb。抱歉，我正在用手机输入这个……
@maqam7 在使用关键帧之前我已经尝试过，但没有成功。你能提供一个解决方案吗？
其他人已经添加了关键帧解决方案。我刚刚添加了一个过渡解决方案。祝你好运！

标签： html css opacity

【解决方案1】：

我在下面的codepen中做了一个例子有代码https://codepen.io/Eros-C/pen/NWjzGOB

HTML

<div class="form"></div>

CSS

.form{
   width:100px;
   height:100px;
   animation: animatedColor 3s linear;
}

@keyframes animatedColor{
   0%{
     background-color: rgba(90, 129, 229, 0);
   }
   100%{
     background-color:rgba(90, 129, 229, 3);
   }

}

【讨论】：

【解决方案2】：

如果背景是一种颜色，你可以这样做：

.background {
  background-color: black;
  animation:fade 3s forwards;
}

@keyframes fade {
  to {
    background-color: white;
  }
}

<div class="background">
  Hello World!
</div>

如果背景是图像，则必须在使用rgba() 更改不透明度的背景图像顶部放置一个图层：

.background{
  background:url(https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=24&d=identicon&r=PG&f=1);
}

.layer{
  height:100%;
  width:100%;
  background-color:rgba(255, 255,255,0);
  animation:fade 3s forwards;  
}

@keyframes fade{
  to{
  background-color:rgba(255, 255,255,1);
  {
}

<div class="background">
  <div class="layer">
    Hello World!
  </div>
</div>

【讨论】：

【解决方案3】：

过渡可能就是你所需要的：

document.querySelector('#toggle').addEventListener('click', () => {
  document.querySelector('#fade-box').classList.toggle('faded');
});

/* The relevant CSS: */

#fade-box {
  background-color: rgba(255,0,0,0);
  transition: background-color 3s ease;
}

#fade-box.faded {
  background-color: rgba(255,0,0,0.7);
}


/* Throwaway styles for working example: */

body {
  background: #655b54 url(https://mars.nasa.gov/imgs/mars2020/jezero-overview.jpg) center center / cover no-repeat;
}

#fade-box {
  font: bold 20px Arial, sans-serif;
  width: 120px;
  height: 120px;
  border: 2px solid white;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

<div id="fade-box">My background fades</div>
<button id="toggle">Click Me to Fade!</button>

【讨论】：

为了记录，我在手机上输入了整个内容！ :P
编辑：现在我回到我的电脑前，让我的例子（希望）更容易看......