博客园首页装饰及切换背景页面闪烁问题（未解决）（已解决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代码如下（已经不适用，请参考分割线以下部分）

但是打开页面发现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，复制以下代码到【博客侧边栏公告】里即可，分割线以上可以忽略，记得把链接换成自己的图片哦。

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

<div id="bg">div>

完。

参考博客：