部落格背景样式 / 属性

Click & Share

这篇很复杂，可是希望你们用心读完 :D

部落格背景分为许多样式 / 属性

▪ 背景颜色 {background-color: 颜色代码}
▪ 背景图片 {background-image: url('图片网址')}
▪ 背景重复 {background-repeat: no-repeat/repeat/repeat-x 横向重复 /repeat-y 垂直重复}
▪ 背景固定 {background-attachment: fixed 固定 / scroll 滚动}
▪ 背景定位 {background-position: top/bottom/left/right/center}

* 你先阅读完 明白后再更换部落格背景 *

Background-color 背景颜色

background-color:#fbbbb9;

background-image 背景图片

background-image:('http://www.f6.dion.ne.jp/~kirako7/simasima.gif');

background-repeat 背景重复

background-image:url('http://3.bp.blogspot.com/-5rlpk1vAICM/TuraMMKOrrI/

AAAAAAAAEeg/AJmMMyR5Irs/s1600/dot01.gif');

background-repeat:repeat-x;

no-repeat 没有重复

repeat 重复

repeat-x 横向重复

repeat-y 垂直重复

【效果请点击这里】

background-attachment 背景固定

background-image:url('http://4.bp.blogspot.com/-XlYOtOUo7jA/TuraIKwXL8I/AAAAAAAAEeU/cHTran6-TKk/s320/20081007_72817ae9ba26dcd15cb2MWwbbXdM6blf.gif');

background-attachment:fixed;

fixed : 背景固定

scroll : 背景随着文章移动

背景位置 background-position

background-image:url('http://www.f6.dion.ne.jp/~kirako7/kiragami_anime1.gif');

background-position:left center;

background-repeat:no-repeat;

Left center : 左 / 中间

center top : 中间 / 顶端

【更多效果查看这里】

我不知道我这样解释，你们明白了没有

（¯﹃¯）

登入部落格 > 设计 > 范本设计



然后去 Edit Html 按 CTRL + F 寻找 body {

然后把 background: $(body.background); 更改成以上的样式

例子 : 我现在部落格的背景其实只是分割线

背景图片 background:url-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixQIRecb8wE_7ZpUR7ZuWpvOQBzQMGAFXtCiT6MAXdEo6xLYtKmIp181DnjQGzX8wIvVx2PKxXwzhqeWqH-R_M6nf0wFbPeMKppThheUpGnGONzHNdgkn_xTJoQUHFJASxm_oqbGwsZg/s1600/dot04.gif');
横向重复 background-repeat:repeat-x;
背景固定 background-attachment:scroll;
背景位置 background-position:top;

明白吗 ? 其实很简单，自己试一试就知道

* TIPS : 如果想要全屏背景，可是使用 background-attachment *

---