Question

对于重复提醒，请阅读整个问题。我没有在DIV上搜索褪色过渡图像背景。我想要的是当点击片段中显示的其中一个按钮时，整个身体背景图像的渐变过渡。制作包装div可能是一个解决方案，但不是这个问题的答案。

div上的背景图像有很多答案，但整个身体没有。

2010年有一些消极的答案，我想会有新的东西。类似的问题根本没有答案，

我有一个很好的解决方案，使用jquery-ui.js淡化身体背景颜色。但不适用于背景图像。

添加-webkit-transition：后台1000ms轻松进出200ms; 在每个CSS类中都有效果，但只在Chrome上：

以下是示例：

$("#btn1").click(function() {
 $('body').removeClass();
});

$("#btn2").click(function() {
 $('body').removeClass();
});

$("#btn3").click(function() {
 $('body').removeClass(); 
});

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>

单击按钮时褪色的身体背景图像（不是div上的背景图像）

0 个答案: