博客园首页装饰及切换背景页面闪烁问题（未解决）（已解决2022.1.4）

 请点击此处转到我写的新博客，里面有详细代码，这篇博客仅作个人留念

 

首先我先给出我的代码，这样你可以快速做出像我一样的页面。

 

 博客皮肤要和我选择一样的SimpleMemory，不同的皮肤页面的HTML代码是不一样的，如果皮肤不同的话用我的CSS样式是无效的。

第二步，页面定制CSS代码。

 

 禁用模板默认CSS不要勾选。

 /*页面的广告*/
#bannerbar,#cnblogs_c1,#cnblogs_c2,#ad_t2{
display:none;   
}

/*主标题*/
#blogTitle h1 {
    font-size: 50px;
    font-family: Consolas;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
    margin-bottom: 15px;
}     

/*副标题*/
#blogTitle h2 {
    margin-top: 30px;
    margin-bottom: 15px;
}

/*鼠标滑过效果  位置是副标题下的导航栏六个按钮位置*/
#navList a:hover {
    text-decoration: none;     /*文本装饰*/
    background-color: #fefefe;
    color: #169fe6;
}

/*副标题下导航栏样式*/
#navigator {
background-color:#fefefe;
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}

/*侧边栏标题样式*/
.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(82, 168, 236, 0.8);
    padding: 5px 0 5px 10px;
    background-color: rgba(245,245,245,0.3);
}

/*可滑动的页面样式设置*/
#home {
opacity: 0.80;
margin: 80px auto;
width: 75%;
min-width: 950px;
background-color: #fefefe;
padding: 30px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.8);
}

body {
    color: #000;
    background-color:#fec;
    background: url("https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119055326town.jpg") fixed ;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
    min-height: 101%;
    padding: 10px 0px;
}

复制粘贴即可，如果你没有其他的需求就可以做出像我一样的界面了。接下来我想说的一些问题是关于背景图定时更换的。这个首先要申请JS权限，位置就在侧边栏公告代码设置旁边。

 

JS代码如下（已经不适用，请参考分割线以下部分）

<script>
    const images = [
        "https://images2.alphacoders.com/856/thumb-1920-856921.jpg",
        "https://images5.alphacoders.com/434/434851.jpg",
        "https://images8.alphacoders.com/447/thumb-1920-447271.png",
        "https://images5.alphacoders.com/830/thumb-1920-830694.png",
        "https://images5.alphacoders.com/834/thumb-1920-834394.jpg",
        "https://images5.alphacoders.com/432/thumb-1920-432931.jpg",
        "https://w.wallhaven.cc/full/rd/wallhaven-rd7637.jpg"
    ];    //图片链接列表，记得换成你自己的，可以先上传到博客相册里设置可见，设置可见，设置可见，再复制图片链接
    const imageslen = images.length;   //如果你只想显示前几个图像可以设置，比如我只想轮换前面四个链接里的图像，这里就把images.length换成3。

//选择页面加载完毕后设置
    window.onload = function(){

        let image = new Image();
        function f1(){
            image.src = images[Math.round(Math.random() * imageslen)];
            image.onload = function () {
                document.body.style.backgroundImage = "url(" + image.src + ")";
                }
         }

        let dotime = 0;
        setInterval(function () {
            if(image.complete){
                f1();
                dotime = 0;
            }
            else {
                dotime++;
                if(dotime>2){    //防止卡死
                    f1();
                }
            }
        },3000);               //设置轮换时间，单位是毫秒，此处为3秒
    }
</script>

 

但是打开页面发现bagroundImage切换时会闪烁一下，如果你能忍受这个缺陷，那就复制粘贴，然后把那些图片链接换成你喜欢的图片链接就行了。

我处理的方法是在JS脚本里新建一个Image对象，给它的src属性赋值先把图片请求过来，等加载好再更换，但还是不行，第一次加载图片始终会这样，到底是加载导致的还是图片要扩张到页面大小导致的呢，我也没有太刨根问底，还望有大佬告知哦，虽然我感觉没有大佬会看到我的博客，哈哈。

 

 ###################################################################################

　　

　　分割线以上是一年前所写，现在我的页面需要用如下所述制作。缺陷已经修复。

 

　　上一次编辑已经是去年一月了。我本身也不是计算机相关专业，学测绘的，明年就去建筑单位了，去年也是心血来潮开通博客园。这次想学逆向，先看了王爽老师的《汇编语言》，写的确实好，深入浅出，渐入佳境。看完后我又看了一本书，《逆向分析实战》，作者冀云。这本书由于比较年轻，或者说读的人少，有些瑕疵未被修正。特别是到用OD打开自己手写的EXE文件那里，我直接打不开，查询许久未果，直至找到一个也是手写的EXE，对比各部分发现了是因为PE头部可选头里的一个参数MajorSubSystemVersion。书上也没错，但填充的编辑器截图那张图和原表不一致，显然截图出了问题，如果按照截图里的写出00 00，而不是表里的04 00的话是无法用OD打开的。网上没有相关说明，我还联系了异步社区的编辑，还没受到回复，所以写了篇博客。然后发现我的博客背景不变换了，很难受。于是有了这篇博客，背景定时改变改进版。

　　我想实现一个不僵硬的切换，不是突然一闪，直接切换的话就会一闪。于是我找到了CSS3里一个很牛的属性：transition。于是我尝试用背景图像作为transition的参数，始终不行，搜了一下才知道background-Image不支持transition，将body的opacity变换对background-Image也不生效。之后发现了一个博客，于是参考了一下。body中确实改变opacity对background-Image不生效，但div不一样。于是将div长宽设置为100%，直接撑开至body。把背景图像给div，然后改变div的opacity。完美。

改进代码附上。

首先是【页面定制CSS】，由于分割线以上写的已经给出一个，那个还是有效的，这次只用增加如下代码即可，即div的CSS属性。

/*背景切换*/
div #bg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -10;
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  zoom: 1;
 
  opacity:1;
  transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -webkit-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
}

 

然后是JS，复制以下代码到【博客侧边栏公告】里即可，分割线以上可以忽略，记得把链接换成自己的图片哦。

<script>
    const images = [
        "https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119053554cuteTide.jpg",
        "https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119053655bluefat.jpg",
        "https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119053759TIDEHUNTER.jpg",
//        "https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119055326town.jpg",
        "https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119053710interest.jpg",
        "https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_210119053718%E6%99%93.png",
        "https://images.cnblogs.com/cnblogs_com/Inn0cent/1918911/o_220103100610_wallhaven-nmewqm.jpg"
    ];
    const imageslen = images.length-1;
    var db = document.getElementById("bg");
    
    let imagesrc = images[Math.round(Math.random() * imageslen)];
    db.style.backgroundImage = "url(" + imagesrc + ")";
        function f2()
        {
            db.style.opacity = .2;
            setTimeout(function(){
                imagesrc = images[Math.round(Math.random() * imageslen)];
                db.style.backgroundImage = "url(" + imagesrc + ")";
                db.style.opacity = 1;
            }, 2000);            
        }
    setInterval("f2()",10000);
</script>

 

最后在【页首HTML】里加上以下这行即可。

<div id="bg"></div>

 

完。

 

参考博客：https://www.cnblogs.com/yhaing/p/7852689.html