让你的博客不再单调 --博客园设置随机背景图片教程

 按惯例先上一张展示图片

要实现自定义随机图片即在后台【页面定制css代码】添加一段简短的代码即可

body { 
     background-color: #efefef;
     background-image: url(http://lorempixel.com/1600/900);
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     background-position: center 0; 
     background-size: cover; 
  }

由上面的css代码不难看出

background-image: url(http://lorempixel.com/1600/900);

这里的URL 即请求图片的URL 

百度了一下网上有很多获取一张背景图片的URL接口（免费）

替换 URL 即可获取不同服务商提供的精美图片

下面列举一些获取随机图片的API接口

http://lorempixel.com/1600/900
https://unsplash.it/1600/900?random（国内加载略慢）

https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture【返回必应图片】

https://uploadbeta.com/api/pictures/random/?key=%E6%8E%A8%E5%A5%B3%E9%83%8E【随机美女图片】

http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1（必应返回JSON数据，具体百度）

等等。。。。

【完】

本着共享精神路人决定把本站的二次美化的css样式共享出来（PS：虽拿不出手，但完全免费，不损害大家的利益）

 

路人使用的默认模板是 ThinkInside

将摸版设置好后

在【页面定制CSS代码】中添加以下代码

/*去掉广告*/
#site_nav_under {
    display: none;
}
.c_ad_block, .ad_text_commentbox {
    display: none;
    margin: 0;
    padding: 0;
}
#ad_under_google {
    height: 0;
    overflow: hidden;
}
#ad_under_google a {
    display: none;
}
#ad_t2{
 display: none;
    margin: 0;
    padding: 0;
}
/*美化推荐按钮*/

#div_digg { position: fixed;bottom: 20px;
   right: 10px;font-size: 0;z-index: 100;width:50px }
.buryit{display:none}

#green_channel { position: fixed;bottom: 30px;right: 100px;z-index: 100 }

/*美化头部*/

#header{
height:60px;
line-height:60px;
font-size:18px;
opacity:0.5;
}
#main{
margin-top:30px;
}
#blogTitle h1,#blogTitle h2{
line-height:50px;
}

#blogTitle h1 a {
    font-size:30px;
}

#blogTitle h2 {
 color:#F5F5F5;
font-size:15px;
}

.menu{margin-top:15px;}

#blog_stats{
line-height:50px;
color:#ffffff;
font-size:14px;
}

/*全局样式*/
html,body{
font-family: 'Microsoft JhengHei', Microsoft YaHei , sans-serif;
}

/*文章内容页*/

.post {
padding-bottom: 30px;
}


ul li {
    list-style: none;
line-height:25px;
}
.commentbox_main{
margin-right:20px;
}
#tbCommentBody{
width:100%;
height:120px;
}
.commentbox_title_left{
display:none;
}

.commentbox_title
{
width:100%
}
.commentbox_title_right{
float:right;
}

#sideBar{
border-radius:1px;
border:0px;
background:#FAFCFD;

}

#topics, .post{
border-radius:1px;
border:0px;
background:#FAFCFD;
}
.dayTitle{
border-bottom-width: 0px;
}

.dayTitle a
{
display:none;
}
.day{
border:1px solid #f1f1f1;
border-radius:3px;
padding:5px;
margin-bottom:6px;
background:#FFFFFF;
}

.day:hover{
    box-shadow: 4px 0px 6px #38AFF3;
}

.entrylistItem{
border:1px solid #f1f1f1;
border-radius:3px;
padding:5px;
margin-bottom:6px;
background:#FFFFFF;
}

.entrylistItem:hover {
 box-shadow: 2px 0px 6px #000;
}

/*http://lorempixel.com/1600/900/*/
/*https://unsplash.it/1600/900?random*/

body { background-color: #efefef; background-image: url(http://lorempixel.com/1600/900); 
background-repeat: no-repeat; background-attachment: fixed; background-position: center 0; background-size: cover; }

#sideBarMain
{
padding:3px;
}

.feedbackItem,.commentform {
background:#ffffff;
padding:5px 10px;;
}
/*底部版权*/

#footer{
    margin: 30px 20px;
    font-size: 12px;
    text-align: center;
    color: #999;
    border-color:#f1f1f1;
    padding-top:20px;
}

/*button input 美化*/

.input_my_zzk{
border-radius:3px;
border: 1px solid #000000;
width:120px;
height:26px;
}
input.btn_my_zzk {
    height: 30px;
   padding:5px  10px;
    vertical-align: none;
border-radius:3px;
border:1px solid;
}
.comment_btn{
  height: 38px;

border-radius:3px;
border:1px solid;
}

 点击保存，返回首页查看效果。【新手教程，写的不好。愿谅解】

【-好吧我又回来了-】

这次把博客样式2.0放出来，演示效果和本站一模一样

/*去掉不要的*/
#site_nav_under {
    display: none;
}
.c_ad_block, .ad_text_commentbox {
    display: none;
    margin: 0;
    padding: 0;
}
#ad_under_google {
    height: 0;
    overflow: hidden;
}
#ad_under_google a {
    display: none;
}
#ad_t2{
 display: none;
    margin: 0;
    padding: 0;
}
/*美化推荐按钮*/

#div_digg { position: fixed;bottom: 20px;right: 10px;font-size: 0;z-index: 100;width:50px }
.buryit{display:none}

#green_channel { position: fixed;bottom: 30px;right: 100px;z-index: 100 }

/*美化头部*/

#header{
background:#340000;
height:60px;
line-height:60px;
font-size:18px;
opacity:0.7;
}
#main{
margin-top:30px;
}
#blogTitle h1,#blogTitle h2{
line-height:50px;
}

#blogTitle h1 a {
    font-size:30px;
}

#blogTitle h2 {
 color:#F5F5F5;
font-size:15px;
}

.menu{margin-top:15px;}

#blog_stats{
line-height:50px;
color:#ffffff;
font-size:14px;
}

/*全局样式*/
html,body{
font-family: 'Microsoft JhengHei', Microsoft YaHei , sans-serif;
}

/*文章内容页*/

.post {
padding-bottom: 30px;
}


ul li {
    list-style: none;
line-height:25px;
}
.commentbox_main{
margin-right:20px;
}
#tbCommentBody{
width:100%;
height:120px;
}
.commentbox_title_left{
display:none;
}

.commentbox_title
{
width:100%
}
.commentbox_title_right{
float:right;
}

#sideBar{
border-radius:1px;
border:0px;
background:#FAFCFD;
border-top-left-radius:20px;
border-top-right-radius:20px;

}

#topics, .post{
border-radius:1px;
border:0px;
background:#FAFCFD;
}
#topics,.post{
border-top-left-radius:2px;
border-top-right-radius:160px;
}
.dayTitle{
border-bottom-width: 0px;
}

.dayTitle a
{
display:none;
}
.day{
border:1px solid #f1f1f1;
border-radius:3px;
padding:5px;
margin-bottom:6px;
background:#FFFFFF;
}

.day:hover{
    box-shadow: 4px 0px 6px #38AFF3;
}

.entrylistItem{
border:1px solid #f1f1f1;
border-radius:3px;
padding:5px;
margin-bottom:6px;
background:#FFFFFF;
}

.entrylistItem:hover {
 box-shadow: 2px 0px 6px #000;
}

/*http://lorempixel.com/1600/900/*/
/*https://unsplash.it/1600/900?random*/

body { 

background-color: #efefef; background-image: url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); background-repeat: no-repeat; background-attachment: fixed; background-position: center 0; background-size: cover; }

#sideBarMain
{
padding:3px;
}

.feedbackItem,.commentform {
background:#ffffff;
padding:5px 10px;;
}
/*底部版权*/

#footer{
    margin: 30px 20px;
    font-size: 12px;
    text-align: center;
    color: #999;
    border-color:#f1f1f1;
    padding-top:20px;
}

/*button input 美化*/

.input_my_zzk{
border-radius:3px;
border: 1px solid #000000;
width:120px;
height:26px;
}
input.btn_my_zzk {
    height: 30px;
   padding:5px  10px;
    vertical-align: none;
border-radius:3px;
border:1px solid;
}
.comment_btn{
  height: 38px;

border-radius:3px;
border:1px solid;
}

新样式

【侧栏图像代码】

 

在博客侧栏公告栏添加如下代码

"width:105px;height:110px;margin-left:auto;margin-right:auto;">"https://pic.cnblogs.com/avatar/879030/20170508134130.png" style="width:100px;height:100px; border-radius:100px;"/>


"text-align:center">只怕心老，不怕路长。



"http://images.cnblogs.com/cnblogs_com/zhibu/998049/o_fgx.jpg" style="width:100%"/>

 

 

【--未完待续--】

 

转载于:https://www.cnblogs.com/zhibu/p/7158807.html