Javascript 从图像背景到彩色背景的平滑过渡_Javascript_Html_Css

Javascript 从图像背景到彩色背景的平滑过渡

javascript html css

Javascript 从图像背景到彩色背景的平滑过渡,javascript,html,css,Javascript,Html,Css,这是我第一次在这个平台上为自己寻求帮助，所以如果我正在寻找的解决方案非常简单，我很抱歉，我是JS新手。。。我试图找到一种方法，通过点击一个按钮，将当前背景图像从黑色和“白色”——最亮的“阴影”是#ccc，最暗的是#000——平滑过渡到坚实的#ccc背景因此，基本上，我点击一个按钮，然后当前背景转换成一个坚实的灰色背景。我设法做到了，但太突然了提前谢谢 HTML: 也许你应该试试这样：从css选择器中删除“html” 在HTML文件中，调整change（）函数，使onclick事件将向正文中

这是我第一次在这个平台上为自己寻求帮助，所以如果我正在寻找的解决方案非常简单，我很抱歉，我是JS新手。。。我试图找到一种方法，通过点击一个按钮，将当前背景图像从黑色和“白色”——最亮的“阴影”是#ccc，最暗的是#000——平滑过渡到坚实的#ccc背景

因此，基本上，我点击一个按钮，然后当前背景转换成一个坚实的灰色背景。我设法做到了，但太突然了

提前谢谢

HTML:

也许你应该试试这样：

从css选择器中删除“html”

在HTML文件中，调整change（）函数，使onclick事件将向正文中添加给定的类

在CSS中使用此类，并使用和关键帧平滑过渡背景色

在下面，您可以找到我的代码片段：

正文{
背景图片：url（'./background.png'）；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
body.animatedColorTransition{
动画：颜色转换向前0.5s；
}
@关键帧颜色转换{
从{
背景：#000；/*背景的阴影，您可以阅读有关线性渐变的内容*/
}
到{
背景：#ccc；/*所需阴影*/
}
}


文件
测试
函数更改（）{
document.getElementById（'bd'）.classList.add（'animatedColorTransition'）；
}

这里有一个解决方案，它使用a将背景图像的不透明度衰减为零，从而在下面显示纯色背景

因为没有CSS属性来设置背景图像的不透明度，所以我使用

：：before

来保存图像并转换整个元素的不透明度

这会带来一些小的复杂情况。有关详细信息，请参见代码注释

函数更改（）{
//更改为classList.toggle以添加/删除类名
//每点击一次。
document.getElementById（“bd”）.classList.toggle（“灰色”）；
}

#bd{
高度：90vh；/*仅确保它为演示占用足够的垂直空间*/
背景：#ccc；/*设置纯色背景色*/
position:relative；/*下面的：：before伪元素需要正确定位*/
}
#bd>*{
position:relative；/*确保内容显示在：：before元素的顶部而不是后面*/
}
#bd：：之前{
要呈现伪元素，内容：“”；/*是必需的*/
/*定位图元以覆盖整个父图元*/
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
/*在这里设置您的bg图像，就像您最初在#bd上设置的那样*/
/*将图像url更改为将在stackoverflow上呈现的内容*/
背景图片：url（“//placekitten.com/400/400”）；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
/*最初完全不透明，因此图像可见*/
不透明度：1；
/*在不透明度更改超过1秒时设置其动画*/
过渡：不透明度1s；
}
#格雷：以前{
/*当.grey类存在时，不透明度将切换为零*/
/*由于上面的转换规则，更改被设置为动画*/
不透明度：0；
}


试验

这并不能解决将背景图像转换为纯色的问题。您需要在css中使用transition属性。过渡：1s将在1秒的时间内过渡。@liebestod仅仅添加一个过渡并不能解决从背景图像移动到纯色的问题。

<body id="bd">
.
.
.
   <h2 class="test" onclick="backgroundToGray()" >test</h2>
   <script>
      function change(){
         document.getElementById("bd").style.background='#ccc';
      }
   </script>
.
.
.
</body>

html, body {
    background: #ccc;
    background-image: url("background.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}