给博客加上淡淡的背景图

1,612 次访问 2020-05-13

ying

纯白的背景好像有点单调，然后给自己博客加上了全局背景~
观察了下，发现这个主题去掉导航和尾部，呈现内容的div都用了site-main这个class，于是乎~加个 ::after~
然而这个background-attachment: fixed移动端无法适配，经过尝试，加了个background-size: cover，虽然移动端无法实现PC端的效果，但至少图片不会只填充一半 ~~又不是不能用233~~
感谢2broear大佬优化了下代码，清爽多了~~
可能有人不太喜欢太花里胡哨的，然后弄了个开关（右下角）来进行开启关闭-。-

.site-main::after {
    opacity: .35;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
/*     background-image: url(https://yingserver.cn/open/acgimg/acgurl.php?t=index); */
/*     background-attachment: fixed; */
/*     background-repeat: no-repeat; */
/*     background-size: cover; */
    /* 下面这个等效于上面四条 */
    background:url(https://yingserver.cn/open/acgimg/acgurl.php?t=index) no-repeat center center /cover fixed; 
    filter: blur(20px);  /* 顺便加点模糊~ */
    z-index: -99;
}

好的，我又水了一篇博客了