令我惊讶的是，经过大量搜索后我找不到答案。我使用简单的 Javascript 来帮助您了解我想要完成的工作，但如果这可以使用 CSS 完成，我也很乐意尝试一下。另外，请记住，我需要它来显示颜色，而不是图像。
<head>
<link rel="stylesheet" type="text/css" href="bground.css">
</head>
<body>
<div id='a' class="circle" onclick="myFunction()"> <br> <br> Click me for blue. </div>
<br>
<script>
function myFunction() {
document.body.style.backgroundColor="blue";}
</script>
</body>
本质上，我希望单击一个按钮可以缓慢地改变背景，就像淡入淡出或过渡效果一样，但过去两天我遇到了很多困难。
最佳答案
您可以为此使用 CSS 转换。
function myFunction() {
document.body.className="B";
}body {
background: red;
}
body.B {
background: blue;
transition: background 4s;
}<body class=A>
<div id='a' class="circle" onclick="myFunction()"> <br> <br> Click me for blue. </div>
<br>
</body>请注意，我使用了一个类。在 javascript 中混合样式元素(如颜色)被认为是不好的做法。
关于javascript - div 元素在单击时会淡化(或过渡)页面的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30414997/