痞客幫背景css語法(650) 

想分享一些痞克幫CSS簡單的語法

CSS還不是說很熟練,

也希望藉由分享,一邊也能把些技巧當做筆記紀錄下來。

(P.S文章底部有整理CSS語法,想快速看語法就拉到最下面囉~)

如何改變部落格背景?

進入部落格的管理後台自訂樣式CSS樣式語法

2 

背景語法寫在body{}裡面,

要改背景就要找到body{},

我知道語法一大串,落落等,可能會找到頭昏眼花。

沒關係,這時候叫出大魔王,按下鍵盤Ctrl+F,輸入body,

哪裡有body,就會直接跑出來!

 7 

將背景分為2種:純色背景圖案背景

純色背景(單一顏色背景):

直接在body{}加入背景顏色語法→background-color:

將背景設為粉色,在後面加上粉色的編碼→background-color:#f8aad6;

再把原圖片背景語法↓

background:url(//pic.pimg.tw/pixnetvisual/3e76a522cdcc1b4f63cbf0f4a7df2b58.jpg);

這行刪掉。

8

再按下預覽,就可以看到背景變成粉色了!

如果確定要這個背景,記得要按下儲存鍵

9

 

圖案背景:

語法如下↓

background:url(//pic.pimg.tw/pixnetvisual/3e76a522cdcc1b4f63cbf0f4a7df2b58.jpg);

後面刮號裡的是圖案連結網址。

sky隨便找一個圖案,

然後把圖案上傳到這個網站→http://imgur.com/

這網站是個國外網站,不需註冊可以上傳圖片,拿到連結網址,很方便。

簡單講一下如何拿到圖片網址,先按下照片中紅色框框的上傳按鈕。

3

找到圖片在電腦裡儲存的位置,按下確定,就可以上傳了。

4

上傳完畢後,在圖片上按下右鍵,會出現一個「複製連結網址」,點下去,連結就這樣複製下來了!

5

再把這串圖片網址直接覆蓋在原本的圖片網址↓

6

按下預覽,背景就會改變了!

5-1

 

在設定背景圖案的時候,要注意一下,圖案的左右端要銜接上下端要銜接

什麼意思呢?

假設今天把這個玫瑰圖片設為背景,

17

設定完成後會發現有地方怪怪的,玫瑰被切掉的感覺。

15

這是因為圖片是按照x軸y軸,不停的重覆堆疊,就像是拼圖

按照橫向x軸來說,就是第二張圖片最左端接在第一張最右端

同樣按照直向y軸來說,第二張圖片最上端接在第一張最下端

如果彼此無法連接起來,就會造成這種奇怪的情況,畫面也會不太美觀。

底下舉例成功連接的圖片↓

18

這是一張楓葉碎花的圖片,它的左端跟右端可以連接,

上下也可以完整連接,設成背景後,就完全不會有異狀。

19

所以在找背景圖案的時候,要注意一下銜接的問題,

如果看不太出來,可以直接設定看看就知道囉

 

將背景排列在下底端,x軸重覆堆疊:

這是一張樂高的圖片,想把它設為背景

10

貼上樂高網址↓

11

顏色好繽紛喔,看起來有點花耶..... 

12

這時候可以加入語法:

background-repeat: repeat-x; ←背景圖片 x方向重複

background-position: bottom; ←圖片位置靠下對齊

預覽結果:

13

這樣的樂高背景是不是可愛多了~~~

 

背景固定─將小圖片固定在右下角:

這是一隻可愛的松鼠,想把它放在背景右下角。((哪裡可愛阿,冏

臨時找不到更可愛的圖片,就將就一下囉~

20

如果沒有固定的話,網頁捲動時牠就會跟著跑,然後就看不到了。

20-1

加入這串語法→background-attachment: fixed;

就可以讓松鼠固定不動,不管怎麼上下左右瀏覽網頁,她都會乖乖待在那裡一動也不動。

23

21

網頁往下拉,松鼠依然在右下角↓

22

 

通常背景簡單一點比較好,不然顏色太繽紛、太複雜的圖案都讓畫面看起來很凌亂。

另外在找尋背景圖案時,要多注意銜接處的問題,

可以盡量找邊緣沒有被切掉的圖案,這樣也就比較不會有連接不起來的問題。

 

整理的CSS語法↓

CSS背景

CSS  語法

中文解釋

background-color:#f8aad6;

純色背景(預設為粉色)

background-image:url(//pic.pimg.tw/aajpg);

圖片背景(刮號內為圖片連結網址)

background-repeat

CSS  語法

中文解釋

background-repeat: no-repeat;

背景圖片不重複

background-repeat: repeat-x;

背景圖片 x方向重複

background-repeat: repeat-y;

背景圖片 y方向重複

background-attachment

CSS  語法

中文解釋

background-attachment: fixed;

網頁捲動時,背景圖片固定不動

background-position

CSS  語法

中文解釋

background-position: top;

位置靠上對齊

background-position: left;

位置靠左對齊

background-position: right;

位置靠右對齊

background-position: bottom

位置靠下對齊

痞客幫改背景CSS痞客幫CSS語法,css語法,部落格css,痞客幫背景,痞客幫背景語法,痞客幫改背景,痞客幫改背景css,痞客幫背景css,痞客幫背景CSS

文章標籤
創作者介紹
創作者 吾愛sky 的頭像
吾愛sky

吾愛sky的異想世界~

吾愛sky 發表在 痞客邦 留言(48) 人氣()


留言列表 (48)

發表留言
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Eva(e小娃)
  • 推1

    感覺很實用!!!
    可是我超怕開到有音樂的部落格!
    因為有時候音響並不是太小聲,如果是在半夜按到,都會被嚇到想罵髒話!哈
  • 哈哈~
    我之前也有在晚上被嚇到過~
    晚上超級安靜,突然有個聲音超大聲,真的會被嚇死XD
    而且如果又是嗨歌,那真的是……#%&£*¢……((消音

    吾愛sky 於 2015/05/21 09:53 回覆

  • 悄悄話
  • Livia ❤
  • 挖~好棒的文章~推
  • 歡迎新朋友喔,謝謝你的推^^

    吾愛sky 於 2015/05/20 23:34 回覆

  • 檸檬子
  • 晚安~真厲害~#3
  • 不客氣^^

    吾愛sky 於 2015/05/20 23:33 回覆

  • 悄悄話
  • Chloris
  • 好實用的一篇文章~
  • 3Q~
    我還沒很熟練語法,
    把我會的分享一下:)

    吾愛sky 於 2015/05/20 23:45 回覆

  • 悄悄話
  • Pink Girl
  • 好貼心的小教學喔~~~
    真的上了一課了
  • 不客氣喔~
    我還怕別人看不懂勒~
    希望有幫助到你:)

    吾愛sky 於 2015/05/20 23:54 回覆

  • 宜宜❤️
  • 推!
    很用心的教學
  • 早阿!宜宜~
    謝謝你的推喔^^

    吾愛sky 於 2015/05/21 09:42 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Ching
  • 很實用的文章!
  • 謝謝喔^^

    吾愛sky 於 2015/05/22 19:40 回覆

  • 旺講
  • sky 太強了 推
    而且真的很實用
  • 沒很強辣~~~
    有機會我再寫改變欄寬的文章,之前有跟你說過的~
    不過教學文感覺會耗費比較多寫文的時間,所以…再…看囉~哈

    吾愛sky 於 2015/05/22 19:46 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Komi
  • 哇~~你好厲害喔!!
    通常我看到這個都是直接放棄耶!!
    太實用了

    推推~~
  • 還好辣~
    沒有到很會辣~呵呵
    如果真的對你有用的話,那就好^^

    吾愛sky 於 2015/05/25 21:09 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 蜜豆莉
  • 電腦白癡的我看完後還是不會操作柳~

    呵~ 呵~ ^0^
  • 哈~
    看不懂沒關係辣,痞客邦有很多好看的樣板,
    直接套用也比較方便~^^

    吾愛sky 於 2015/05/27 23:42 回覆

  • 花媽
  • 推,謝謝分享^^
  • 不客氣喔~
    謝謝花媽的推^^

    吾愛sky 於 2015/06/10 09:11 回覆

  • D0432864
  • 超讚的!!感謝~~
  • 謝謝你喔^^很高興能幫到你~

    吾愛sky 於 2016/02/22 09:27 回覆

  • 阿嘉嘉
  • 覺得很厲害....讚