最近有空给网站除草了，在这里也做了一些小优化，添加网站背景图片看起来不这么单调。

简单记录折腾日志。

添加渐变背景

 1body::before {
 2    content: '';
 3    position: fixed;
 4    top: 0;
 5    left: 0;
 6    right: 0;
 7    bottom: 0;
 8    z-index: -520;
 9    pointer-events: none;
10}
11body::before {
12    background: linear-gradient( 90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1)); /*背景颜色*/
13}

添加背景图片

 1body::before {
 2    content: '';
 3    position: fixed;
 4    top: 0;
 5    left: 0;
 6    right: 0;
 7    bottom: 0;
 8    z-index: -520;
 9    pointer-events: none;
10}
11body::before {
12    background-image: url(/img/1.avif);/* 这里设置图片 */
13    background-repeat: no-repeat;
14    background-size: cover;
15}

添加动态渐变背景

 1body::before {
 2    content: '';
 3    position: fixed;
 4    top: 0;
 5    left: 0;
 6    right: 0;
 7    bottom: 0;
 8    z-index: -520;
 9    pointer-events: none;
10}
11body::before {
12    background: linear-gradient( 90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1)); /*背景颜色*/
13    background-size: 500%;
14    animation: bgAnimation 15s linear infinite; /*执行动画*/
15}
16@keyframes bgAnimation{
17    0%{
18        background-position: 0% 50%;
19    }
20    50%{
21        background-position: 100% 50%;
22    }
23    100%{
24        background-position: 0% 50%;
25    }
26}