博客園自定義背景

寫在前面甥啄,這個教程不是我原創(chuàng),只是我換背景的時候找了三篇博文才把背景換好氯窍,所以總結(jié)一下缔杉,讓朋友們少走彎路锤躁。

改完背景后我發(fā)現(xiàn)其實只是把css代碼里的背景地址換成我們想要設置的圖片地址就可以,所以直接進入第3步就可以或详,小白的話可以從第1步開始看系羞。


1.先獲取背景地址,直接去網(wǎng)上找喜歡的圖片的地址就可以了霸琴,但是這樣的缺點是萬一那張圖片的地址變了椒振,博客園的背景就跟著變了,所以可以先把背景存博客園相冊沈贝,不過怕麻煩的話可以直接復制圖片地址進入第二步

 先把想要設置的背景圖上傳到自己的博客相冊里

????步驟:進入博客園首頁》右上角我的博客》管理》相冊

? ? 先建立一個相冊杠人,再上傳照片

? ? 建好以后這個樣子,然后點擊沒有照片宋下,選擇文件



2.記錄好相冊里背景圖的url

步驟:點擊上傳的圖片》點擊f12查看元素》光標點到圖片那里查看圖片的url

src后面這一串就是嗡善,如果你用瀏覽器打開這一串地址顯示的是這張圖片就說明這個這個url是對的

3.修改css代碼里body里的圖片路徑(這一步很關(guān)鍵,我就是卡在這個地方才搞了半天才發(fā)現(xiàn)問題)

步驟:點擊管理》設置》找到“頁面定制css代碼”》復制下面這一段代碼到框里

white-space: pre;

? ? word-wrap: normal;

}

.cnblogs-markdown .hljs {

? ? display: block;

? ? overflow-x: auto;

? ? padding: 0.5em;

? ? background: #23241f !important;

? ? color: #FFF;

? ? white-space: pre;

? ? word-break: normal;

}

.hljs,

.hljs-tag,

.hljs-subst {

? color: #f8f8f2;

}

.hljs-strong,

.hljs-emphasis {

? color: #a8a8a2;

}

.hljs-bullet,

.hljs-quote,

.hljs-number,

.hljs-regexp,

.hljs-literal,

.hljs-link {

? color: #ae81ff;

}

.hljs-code,

.hljs-title,

.hljs-section,

.hljs-selector-class {

? color: #a6e22e;

}

.hljs-strong {

? font-weight: bold;

}

.hljs-emphasis {

? font-style: italic;

}

.hljs-keyword,

.hljs-selector-tag,

.hljs-name,

.hljs-attr {

? color: #f92672;

}

.hljs-symbol,

.hljs-attribute {

? color: #66d9ef;

}

.hljs-params,

.hljs-class .hljs-title {

? color: #f8f8f2;

}

.hljs-string,

.hljs-type,

.hljs-built_in,

.hljs-builtin-name,

.hljs-selector-id,

.hljs-selector-attr,

.hljs-selector-pseudo,

.hljs-addition,

.hljs-variable,

.hljs-template-variable {

? color: #e6db74;

}

.hljs-comment,

.hljs-deletion,

.hljs-meta {

? color: #75715e;

}

.cnblogs_code {

? ? background-color: rgba(245, 245, 245, 0.05);

}

#AjaxHolder_UpdatePanel1, #AjaxHolder_PostComment_divCommnentArea, #profile, .entrylist, .gallery {

? ? background: none repeat scroll 0 0 rgba(255, 255, 255, 0.24);

? ? border-radius: 7px;

? ? box-shadow: 1px 1px 2px #A7A8AD;

? ? margin: 0 0 15px 0;

? ? min-height: 200px;

? ? overflow: hidden;

? ? padding: 0 15px;

? ? text-overflow: ellipsis;

? ? word-break: break-all;

}

#home {

? ? margin: 0 auto;

? ? width: 80%;/*原始65*/

? ? min-width: 980px;/*頁面頂部的寬度*/

? ? background-color:rgba(185, 171, 171, 0.29);

? ? padding: 30px;

? ? margin-top: 50px;

? ? margin-bottom: 50px;

? ? box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

}

body {

? ? background-repeat: no-repeat;?

? ? background: rgba(12, 100, 129, 0)? fixed;

? ? background-image:url('https://pic4.zhimg.com/v2-8edde88d4f64057c7e99847164445555_r.jpg');

? ? background-size: 100%;

? ? background-repeat: no-repeat;

? ? font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;

? ? font-size: 12px;

? ? min-height: 101%;

}

#blogTitle {

? ? height: 100px;? /*高度*/

? ? clear: both;

? ? background-color: rgba(245, 245, 245, 0);

}

#blogTitle h1 {

? ? font-size: 36px;

? ? font-weight: bold;

? ? line-height: 1.8em;/*原始 1.6em*/

? ? margin-top: 10px;/*原始 15px */

? ? color: #548B54;

}

#blogTitle h2 {

? ? font-weight: normal;

? ? font-size: 17px;/*原始 16px 学歧;font-size: 1.0rem;*/? ? ?

? ? line-height: 1.8;

? ? color: #FFFFFF;

? ? font-weight: bold;

? ? text-align: right;

? ? float: right;

}

#navigator{

? ? background-color:rgba(59, 181, 153, 0);

}

#navList a:link, #navList a:visited, #navList a:active{

? ? color: rgba(29, 15, 15, 0.53);

? ? font-size: 18px;

? ? font-weight: bold;

}

#navList a:hover {

? ? color: white;

? ? background-color: rgba(52, 52, 52, 0.09);

? ? text-decoration: none;

? ? text-shadow: 0px 0px 0px #19d427;

}

.blogStats{

? ? color: #eee;

}

.postTitle {

? ? border-left: 8px solid rgba(41, 162, 56, 0.56);

? ? 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:rgba(16, 25, 16, 0.43);

? ? transition: all 0.4s linear 0s;

}

.postTitle a:hover {

? ? margin-left: 30px;

? ? color: #0f3647;

? ? 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);

}

/*文章附加信息*/

.postDesc {?

? ? background: url(images/posted_time.png) no-repeat 0 1px;

? ? color: #757575;

? ? float: left;

? ? width: 100%;

? ? clear: both;

? ? text-align: left;? ?

? ? font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;

? ? font-size: 13px;

? ? padding-right: 20px;/*5px? padding-left: 90px;posted 發(fā)表時間左邊距離*/

? ? 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(33, 160, 139, 0);

}

.catListTitle {

? ? background: rgba(51, 153, 0, 0);

? ? border-bottom: 1px solid #006600;

? ? border-top-left-radius: 7px;

? ? border-top-right-radius: 7px;

? ? color: rgba(37, 177, 80, 0.61);

? ? font-size: 1.3em;

? ? height: 1.8em;

? ? line-height: 1.8em;

? ? padding: 6px;

? ? text-indent: 0.6em;

? ? text-shadow: 0px 0px rgba(0, 0, 0, 0.3);

}

#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);}

在上面這一串代碼中找到body罩引,把body里的url換成背景圖的url,注意:url括號里有個引號枝笨,不要漏了袁铐,我第一次改的時候漏了就出錯了揭蜒,箭頭指的大概是背景圖的大小,我第一次復制的另外個博主的代碼改出來就是n張背景圖拼接的剔桨,換成這個大小以后就是一張很大的背景圖了


都改好以后點擊保存就可以了屉更,不必禁用模板默認css

如果改完以后博客依然不是自己改的背景圖的話,可能是自己之前選的皮膚和自己的背景圖樣式?jīng)_突洒缀,再把皮膚改成darkgreentrip就可以了瑰谜,如果還不可以的話.......就自己檢查一下,反正這樣改百分之百能成功树绩,我寫這篇文章就又改了一次萨脑,嘿嘿

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市饺饭,隨后出現(xiàn)的幾起案子渤早,更是在濱河造成了極大的恐慌,老刑警劉巖瘫俊,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鹊杖,死亡現(xiàn)場離奇詭異,居然都是意外死亡军援,警方通過查閱死者的電腦和手機仅淑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門称勋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來胸哥,“玉大人,你說我怎么就攤上這事赡鲜】昭幔” “怎么了?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵银酬,是天一觀的道長嘲更。 經(jīng)常有香客問我,道長揩瞪,這世上最難降的妖魔是什么赋朦? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮李破,結(jié)果婚禮上宠哄,老公的妹妹穿的比我還像新娘。我一直安慰自己嗤攻,他們只是感情好毛嫉,可當我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著妇菱,像睡著了一般承粤。 火紅的嫁衣襯著肌膚如雪暴区。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天辛臊,我揣著相機與錄音仙粱,去河邊找鬼。 笑死彻舰,一個胖子當著我的面吹牛缰盏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播淹遵,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼口猜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了透揣?” 一聲冷哼從身側(cè)響起济炎,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎辐真,沒想到半個月后须尚,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡侍咱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年耐床,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片楔脯。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡撩轰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出昧廷,到底是詐尸還是另有隱情堪嫂,我是刑警寧澤,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布木柬,位于F島的核電站皆串,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏眉枕。R本人自食惡果不足惜恶复,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望速挑。 院中可真熱鬧谤牡,春花似錦、人聲如沸梗摇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伶授。三九已至断序,卻和暖如春流纹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背违诗。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工漱凝, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人诸迟。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓茸炒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親阵苇。 傳聞我的和親對象是個殘疾皇子壁公,可洞房花燭夜當晚...
    茶點故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 不會用代碼框,所以看著有些亂套绅项,紊册,,快耿,html部分 <!DOCTYPE html> 迅雷看看 ...
    這就是個帥氣的名字閱讀 1,534評論 0 0
  • 1囊陡、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素掀亥?現(xiàn)在撞反,利用CSS3的Transform,...
    kiddings閱讀 3,164評論 0 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5搪花? 答:HTML5是最新的HTML標準遏片。 注意:講述HT...
    kismetajun閱讀 27,486評論 1 45
  • 人文漯河閱讀 133評論 0 0
  • 周末愉快——又到了星期五的晚上,飯后消遣鳍侣,我手捧一杯清茶丁稀,掰開一本從銘帥書包里拿出的探索發(fā)現(xiàn)看了起來,面...
    指揮官閱讀 192評論 0 4