对于重复提醒，请阅读整个问题。我没有在DIV上搜索褪色过渡图像背景。我想要的是点击片段中显示的其中一个按钮时整个身体背景图像的淡入过渡。制作包装div可能是一种解决方案，但不是我正在寻找的答案。
我发现很多答案都是在div上褪色背景图像，而不是整个身体。
2010年有一些消极的答案，我想会有新的东西。 类似的问题根本没有答案：
我有一个很好的解决方案，使用jquery-ui.js淡化身体背景颜色：
但不适用于背景图片。这是一个例子：
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1',1000, "easeOutBounce" );
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2',1000, "easeOutBounce" );
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3',1000, "easeOutBounce" );
});body {align-items: center;
justify-content: center;
text-align: center;
}
body.class1 {
background-image: url(https://1.bp.blogspot.com/-10uYQ232GmA/VB2cCRa0pDI/AAAAAAAAGgw/m9nRdE1d-Rg/s1600/checkerboard-tile-pattern.jpg);
background-repeat:repeat;
}
body.class2 {
background-image: url(http://www.subdude-site.com/WebPages_Local/RefInfo/Computer/WebDev/WebPageTiles/tilesTiles/tile_pattern_marbleTiles_bright_green_256x256.jpg);
background-repeat:repeat;
}
body.class3 {
background-image: url(https://4.bp.blogspot.com/-mCCWT2Qsqe4/UhHnOaJW7KI/AAAAAAAAFRo/4FHJyJdAeko/s1600/glossy-blue-ceramic-tiles-pattern.jpg);
background-repeat:repeat;
}
button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="class1">
<button id="btn1">01</button>
<button id="btn2">02</button>
<button id="btn3">03</button>
</body>