1. 程式人生 > 實用技巧 >如何在部落格園中自定義背景

如何在部落格園中自定義背景

首先進入部落格設定

然後在頁面Css程式碼裡將以下程式碼貼上進去!

  1 /*simplememory*/
  2 #google_ad_c1, #google_ad_c2 {display:none;}
  3 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter             table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea 
{ 4 font-size: 14px!important; 5 } 6 #home { 7 opacity: 0.80; 8 margin: 0 auto; 9 width: 85%; 10 min-width: 950px; 11 background-color: #fff; 12 padding: 30px; 13 margin-top: 30px; 14 margin-bottom: 50px; 15 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 16 } 17 #blogTitle h1 { 18 font-size: 30px
; 19 font-weight: bold; 20 font-family: "Comic Sans MS"; 21 line-height: 1.5em; 22 margin-top: 20px; 23 color: #515151; 24 } 25 #navList a:hover { 26 color: #4C9ED9; 27 text-decoration: none; 28 } 29 #navList a { 30 display: block; 31 width: 5em; 32 height: 22px; 33 float: left; 34 text-align
: center; 35 padding-top: 18px; 36 } 37 #navigator { 38 font-size: 15px; 39 border-bottom: 1px solid #ededed; 40 border-top: 1px solid #ededed; 41 height: 50px; 42 clear: both; 43 margin-top: 25px; 44 } 45 .catListTitle { 46 margin-top: 21px; 47 margin-bottom: 10.5px; 48 text-align: left; 49 border-left: 10px solid rgba(82, 168, 236, 0.8); 50 padding: 10px 0 14px 10px; 51 background-color: #f5f5f5; 52 } 53 #ad_under_post_holder #google_ad_c1,#google_ad_c2{ 54 display: none !important; 55 } 56 body { 57 color: #000; 58 background: url(http://images2015.cnblogs.com/blog/969197/201703/969197-20170325160900815-1058599404.jpg 59 ) fixed; 60 background-size: 100%; 61 background-repeat: no-repeat; 62 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; 63 font-size: 12px; 64 min-height: 101%; 65 } 66 #topics .postTitle { 67 border: 0px; 68 font-size: 200%; 69 font-weight: bold; 70 float: left; 71 line-height: 1.5; 72 width: 100%; 73 padding-left: 5px; 74 } 75 76 77 div.commentform p{ 78 margin-bottom:10px; 79 } 80 .comment_btn { 81 padding: 5px 10px; 82 height: 35px; 83 width: 90px; 84 border: 0 none; 85 border-radius: 5px; 86 background: #ddd; 87 color: #999; 88 cursor:pointer; 89 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif; 90 text-shadow: 0 0 1px #fff; 91 display: inline !important; 92 } 93 .comment_btn:hover{ 94 padding: 5px 10px; 95 height: 35px; 96 width: 90px; 97 border: 0 none; 98 border-radius: 5px; 99 background: #258fb8; 100 color: white; 101 cursor:pointer; 102 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif; 103 text-shadow: 0 0 1px #fff; 104 display: inline !important; 105 } 106 #commentform_title { 107 background-image:none; 108 background-repeat:no-repeat; 109 margin-bottom:10px; 110 padding:0; 111 font-size:24px; 112 } 113 #commentbox_opt,#commentbox_opt + p { 114 text-align:center; 115 } 116 .commentbox_title { 117 width: 100%; 118 } 119 #tbCommentBody { 120 font-family:'Microsoft Yahei', Microsoft Yahei, 宋體, sans-serif; 121 margin-top:10px; 122 max-width:100%; 123 min-width:100%; 124 background:white; 125 color:#333; 126 border:2px solid #fff; 127 box-shadow:inset 0 0 8px #aaa; 128 // padding:10px; 129 height:250px; 130 font-size:14px; 131 min-height:120px; 132 } 133 .feedbackItem { 134 font-size:14px; 135 line-height:24px; 136 margin:10px 0; 137 padding:20px; 138 background:#F2F2F2; 139 box-shadow:0 0 5px #aaa; 140 } 141 .feedbackListSubtitle { 142 font-weight:normal; 143 } 144 145 #blog-comments-placeholder, #comment_form { 146 padding: 20px; 147 background: #fff; 148 -webkit-box-shadow: 1px 2px 3px #ddd; 149 box-shadow: 1px 2px 3px #ddd; 150 margin-bottom: 50px; 151 } 152 .feedback_area_title { 153 margin-bottom: 15px; 154 font-size: 1.8em; 155 } 156 .feedbackItem { 157 border-bottom: 1px solid #CCC; 158 margin-bottom: 10px; 159 padding: 5px; 160 background: rgb(248, 248, 248); 161 } 162 .color_shine {background: rgb(226, 242, 255);} 163 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;} 164 #comment_form .title { 165 font-weight: normal; 166 margin-bottom: 15px; 167 }

點選儲存就歐克了。

PS:

如果想要更換圖片背景的話,在剛才的CSS中找到下面的這個程式碼

body {
color: #000;
background: url(http://images2015.cnblogs.com/blog/969197/201703/969197-20170325160900815-1058599404.jpg
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}

將圖片路徑更改為你的路徑即可。

但是這個路徑得是你上傳部落格園中的,可以隨意寫個隨筆,將圖片上傳。然後開啟這篇隨筆,複製圖片路徑粘到這個位置上即可。