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

Question

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

所以本质上，我单击一个按钮，然后当前背景转换为纯灰色背景。 我设法做到了，但这很突然。

提前致谢。

HTML：

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

css：

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

Answer 1

这是一个解决方案，它使用CSS 过渡将背景图像的不透明度淡化为零，从而在下面显示纯色背景。

因为没有 CSS 属性来设置背景图像的不透明度，所以我使用::before伪元素来保存图像并转换整个元素的不透明度。

这引入了一些小并发症。 有关详细信息，请参阅代码注释。

 function change(){ // changed to classList.toggle to add/remove a classname // with each click. document.getElementById("bd").classList.toggle('grey'); }

 #bd { height: 90vh; /* just ensuring it occupies enough vertical space for the demo */ background: #ccc; /* set the solid background color */ position: relative; /* required for the::before pseudo-element below to position properly */ } #bd > * { position: relative; /* ensures the content appears on top of the::before element instead of behind it */ } #bd::before { content: ''; /* required for pseudo elements to render */ /* position the element to cover the entire parent */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; /* set up your bg image here, just as you originally had on #bd */ /* changed the image url to something that will render on stackoverflow */ background-image: url("//placekitten.com/400/400"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; /* initially fully opaque so the image is visible */ opacity: 1; /* animate the opacity when it changes over 1 second */ transition: opacity 1s; } #bd.grey::before { /* when the.grey class is present opacity switches to zero. */ /* and because of the transition rule above the change is animated */ opacity: 0; }

 <.-- stripped to its bare minimum just for clarity. no important changes here. --> <div id="bd"> <h2 class="test" onclick="change()" >test</h2> </div>

Answer 2

也许你应该尝试这样的事情：

从 css 选择器中删除“html”
在您的 HTML 文件中，调整 change() function 所以 onclick 事件会将给定的 ZA2F2ED2F8DCEBC2CBBD46AB 正文添加到 A
在 CSS 中使用此 class 并使用animation 属性和关键帧平滑过渡背景颜色。

下面你会找到我的片段：

 body { background-image: url('./background.png'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } body.animatedColorTransition { animation: color-transition 0.5s forwards; } @keyframes color-transition { from { background: #000; /* shade of the background, you can read about linear-gradient */ } to { background: #ccc; /* desired shade*/ } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Document</title> </head> <body id="bd"> <h2 class="test" onclick="change()">test</h2> <script> function change() { document.getElementById('bd').classList;add('animatedColorTransition'); } </script> </body> </html>

祝你好运，告诉我它是否适合你！

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-02-21 20:43:32

解决方案2
-1 2021-02-21 20:31:00

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-02-21 20:43:32

解决方案2 -1 2021-02-21 20:31:00

解决方案1
0 已采纳 2021-02-21 20:43:32

解决方案2
-1 2021-02-21 20:31:00