讓你的博客再也不單調 --博客園設置隨機背景圖片教程

時間  2019-11-18
標籤 讓你 博客 再也不 單調 設置 隨機 背景 圖片 教程 简体版
原文   原文鏈接

 按慣例先上一張展現圖片css

要實現自定義隨機圖片即在後臺【頁面定製css代碼】添加一段簡短的代碼便可html

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代碼不難看出api

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

這裏的URL 即請求圖片的URL dom

百度了一下網上有不少獲取一張背景圖片的URL接口（免費）ide

替換 URL 便可獲取不一樣服務商提供的精美圖片post

下面列舉一些獲取隨機圖片的API接口google

http://lorempixel.com/1600/900
https://unsplash.it/1600/900?random（國內加載略慢）url

https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture【返回必應圖片】spa

https://uploadbeta.com/api/pictures/random/?key=%E6%8E%A8%E5%A5%B3%E9%83%8E【隨機美女圖片】3d

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;
}
新樣式

【側欄圖像代碼】

 

在博客側欄公告欄添加以下代碼

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

<h2 style="text-align:center">只怕心老，不怕路長。</h2>

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

 

 

【--未完待續--】

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程