花了一点时间修改自己的博客背景设置，现在分享一下代码。希望对大家有帮助。我的比较简单，主要代码模板来源于另外一个博主，然后我在基础上进行了部分修改。博主的连接：https://www.cnblogs.com/Jack-Cheng008/p/13049920.html
想要修改成我这样的话 博客园设置：首先博客皮肤选择darkgreentrip
有一个JS权限需要自己申请一下 和博客园申请时差不多 随便写写 半个小时左右申请成功
定制CSS代码 把下面这个拷进去
如果你有一点前端基础 应该可以知道哪些地方是修改背景图片和一些颜色边框啥的 就不给你指出来了！！！
#home {
margin: 0 auto;
width: 80%;/*原始65*/
min-width: 980px;/*页面顶部的宽度*/
background-color: rgba(249, 160, 208, 0.3);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
background: rgba(12, 100, 129, 1) url('https://img1.baidu.com/it/u=2642858887,2185261566&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800') fixed no-repeat; /*修改背景图片*/
background-position: 50% 5%;
background-size: cover;
}
#blogTitle {
height: 100px; /*高度*/
clear: both;
background-color: rgba(252,222,262,0.2); /*博客标题的背景*/
}
#blogTitle h1 {
font-size: 30px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #FFFFCC;
}
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color: #996699; /*二标题字体颜色*/
font-weight: bold;
text-align: right;
float: right;
}
#navigator{
background-color:rgba(252,222,262, 0.2); /*标题栏下的颜色*/
}
#navList a:link, #navList a:visited, #navList a:active{
color:#FFFFCC;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #EE6363;
}
.postTitle {
border-left: 8px solid rgba(132,112,255, 0);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #996699;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #EE6363;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
}
.day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.2);
}
/*文章附加信息*/
.postDesc {
background: url('https://img2.baidu.com/it/u=2899713182,4254650015&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500') no-repeat 0 1px; /* 标题框下的图片*/
color: rgba(108,103,105);
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 12px;
padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
}
.CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
background-color: rgba(194, 91, 245, 0.6); /*栏目的条纹颜色*/
}
#topics{
background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
display: none;
}
#tbCommentBody{
width: 100%;
height: 200px;
background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}
.CalNextPrev{background: rgba(255, 255, 255, 0);}
.cnblogs_code{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{
background: rgba(255, 255, 255, 0);
}
#main{min-width: 640px;}
.entrylist{
background: rgba(255, 255, 255, 0.5);
}
/*以下是侧边栏字体的样式*/
p {
font-size:24px;
color:deeppink;
}
中间各个栏目的颜色和字体颜色可自由更换，自行调节。
url后面括号内插入底图链接(记得加引号哦！！！)
rgba针对图片，前三个是颜色调节，最后一个数字是透明度调节。color主要针对字体。
效果：
将代码插入博客侧边栏公告即可:
<p>大雨过后，有两种人：一种人抬头看天，看到的是雨后彩虹，蓝天白云； 一种人低头看地，看到的是淤泥积水，艰难绝望。<p>
我这个侧边栏没有写太多就写了一段文字 也有可以插入音乐 图片啥的 都可以自己制作 我前端刚开始接触 没有了解太多 copy个别人的先玩着 等回头再自己补充
控制大小颜色的代码是上面代码里面的
/*以下是侧边栏字体的样式 自行修改*/
p {
font-size:24px;
color:deeppink;
}
效果：
==页首HTML代码
<div id="i1" style="color:deeppink;font-size:28px;padding:15px;">
<center>哪有什么岁月静好，不过是有人替你负重前行！</center></div>
<script>
function func(){
var tag = document.getElementById('i1');
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content;
tag.style.cssText += 'text-align:center';
}
setInterval('func()',500);
</script>
这个我在博客最上方添加了一个滚动的一段话 也可以根据自己的想法自己修改
效果：
页脚HTML代码里面添加
/* 粒子吸附*/
<script id="c_n_script" src="https://blog-static.cnblogs.com/files/xiaokang01/js.js" color="254, 185, 45" opacity="1" count="200" zindex="-2">
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
} else {
}
</script>
<script type="text/javascript">
这个是背景的一个动态效果 粒子吸附 可以根据需要自己修改粒子颜色
效果：
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤你有梦想吗？？？❤","❤你没有！！！❤","❤٩(๑❛ᴗ❛๑)۶ ❤","❤你有女朋友吗？？？❤","❤你没有！！！❤","❤那还不赶紧去努力学习！！！❤","❤┗(•ω•;)┛❤","❤摆烂达人！！！❤","❤(＾＿－)❤","❤世界杯❤","❤(^_−)☆❤","❤废寝忘食学python❤","❤ヾ(@^▽^@)ノ❤","❤炁体源流❤","❤通天箓❤","❤拘灵遣将❤","❤风后奇门❤","❤双全手❤","❤神机百炼❤","❤六库仙贼❤","❤大罗洞观❤");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
2500,
function() {
$i.remove();
});
});
});
</script>
这个是一个鼠标特效 我找了两个博主的 发现差不多 只是需要自己修改和增加点出来的字样
var a = new Array("❤你有梦想吗？？？❤","❤你没有！！！❤","❤٩(๑❛ᴗ❛๑)۶ ❤","❤你有女朋友吗？？？❤","❤你没有！！！❤"); 在这个里面自己修改
效果：
其实还有一个动画效果 我感觉不好看 就自己把它给删掉了 有需要可以去上面链接里面自己找