痞客幫背景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

arrow
arrow

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