【部落格css樣式】 背景系列-1   哪裡改背景圖? 如何素材小圖做成連續背景?!

((背景系列文章))

【部落格痞客css樣式】 背景系列-1 哪裡改背景圖? 素材小圖做成連續背景?!

部落格痞客css樣式】 背景系列-2 如何固定背景圖不隨捲軸移動

【部落格痞客css樣式】 背景系列-3 如何設定背景圖位置和背景色結合應用

 

 

【新手Q.1】CSS哪裡改背景圖

進入痞客後台選樣式設計精靈→css原始碼編輯

 

尋找.jpg  


看到一堆css整個超眼花繚亂,要怎麼找到你要修改的地方,

點瀏纜器的編輯尋找”就會直接跳到你找的區塊唷!


body.jpg  

 

--------------------------------------------------------------------------------------------

 


背景圖.jpg  

劃紅線那行”background”就是要改背景屬性的地方,

寫法:

Background:url(背景圖網址);

 

重點:

Backgroundurl間一定要有”: ”冒號

每一行最後一定要”;”分號

url(   )←括號裡的圖片網址路徑要正確,如http://www.oz.stu.edu.tw/s96108201/www/back.jpg

一定要將圖檔上傳到網路空間,注意網址是否jpg .gif .png等圖片檔名結尾,


--------------------------------------------------------------------------------------------

【示範】素材小圖做成連續背景

 

ORIGIN.jpg  

1.jpg  

原本background那行後面是寫#505050

這是色碼#505050就是目前灰色純顏色的底 

現在要改成以圖片來當底圖

改成下面這樣,括號內就是圖片網址

Background:url(http://atp.boo.jp/bg/img/dot_39.gif);

 dot_39.gif  

因為我們拿來當背景的圖片是一張32x32px的咖啡色白點點的小圖

要讓他直行和橫列都重複排列才能變成一張完美的底圖

所以要加上repeat ,打在右括號空一格後面,

Background:url(http://atp.boo.jp/bg/img/dot_39.gif) repeat;

NEW.jpg  

儲存後就會變成一片完整咖啡色白點的背景圖囉^.^

 

--------------------------------------------------------------------------------------------

補充:

背景圖重複控制:

background-repeat: no-repeat;   不重複

background-repeat: repeat-x;    x軸重複(橫向)

background-repeat: repeat-y;    y軸重複(直向)

background-repeat: repeat;       xy都重複(直和橫都重複)

 

----------------------------------------------------------------------------------------------

 

如果有疑問請回留言唷

 

ps:css樣式的規則是適用各個部落格喔!雖然是用痞客做為示範,但無名、天空等各家部落格都是一樣的^^

創作者介紹

非學不可

鹿老師 發表在 痞客邦 PIXNET 留言(14) 人氣()


留言列表 (14)

發表留言
  • ajuju630
  • 好用心的文章喔^^
    我也是分享css的部落客
    很高興認識你唷^^

    版主回覆:(11/12/2010 02:09:27 PM)


    剛開始寫css~~
    我也很高興認識你^.^
  • woods1
  • 阿~好詳細的說明~,,早點發現就好了.....怎麼晚還沒睡喔

    版主回覆:(01/13/2010 04:15:56 PM)


    我都很晚睡的
    你不也還沒睡嗎呵呵
  • woods1
  • 呵~不知~怎麼用的還有亂碼~改不了~

    版主回覆:(01/27/2010 07:23:02 PM)


    嗯~~亂碼?網站有亂碼啊?
  • woods1
  • 可能是從~原來的直接復製~貼上~跟~拍賣網不合吧,,,妳是電腦工程師喔~

    版主回覆:(01/27/2010 07:48:39 PM)


    我是sophie做網頁和平面設計 和電腦相關的是另一位板主灰色金盞花 ^.^
  • woods1
  • 阿~是喔~直接跳首頁..那妳看不到


    版主回覆:(01/27/2010 07:50:11 PM)


    嗯啊...可能要給賣場首頁的網址or帳號...
  • woods1
  • http://class.ruten.com.tw/user/index00.php?s=twin-kiss


    任何一個商品點進去 最下面都有

    版主回覆:(01/27/2010 07:52:22 PM)


    或許跟你從網頁直接複製有關@.@
    你先貼到記事本(因為記事本不支援語法) 如果有什麼亂碼或語法先刪掉在貼到網拍頁面
  • woods1
  • 昨天做圖用到8點才睡...10點又起來談案子~,,,整個人都快掛了

    版主回覆:(01/28/2010 06:24:47 AM)


    睡不到2小時啊!!!!
    真的會掛....@@
  • woods1
  • 睡了沒


    版主回覆:(01/28/2010 01:55:20 AM)


    呼...還沒呢...
  • doggydoggy2
  • hiya非, 請問“一定要將圖檔上傳到網路空間”的空間是指哪? 謝謝啦∼

    版主回覆:(01/28/2010 06:56:12 PM)


    例如痞客的相簿啊^^"
    一定要上傳到網路上
    存在自己的電腦裡不能在網路上使用啊
  • LA  LA
  • 看到你的文周吸收很多知識~感謝你。但想問說~閃圖可以在"PS"製作成功貼上,但是要怎ㄇ讓他在橫幅閃???

    版主回覆:(03/26/2010 09:35:21 AM)


    由於你的留言沒有登入,所以我將留言解除悄悄話,這樣子回覆你才看的見。

    閃圖背景圖必須是存成gif格式才行,假如你存成ps的檔案格式就無法出現閃圖的效果。

    使用方法跟一般加入背景都相同,你可以在『橫幅』篇找到相關文章。

    但我不清楚你的問題出在哪裡,只是推測可能你存檔的格式有誤,才會無法出現效果。

    或者你將畫面讓我看下?

    ps.photoshop做閃圖 可在ps裡轉imageready做gif動態圖
  • @~默語不語~@
  • 你的部落格好棒唷!!!!~~

    版主回覆:(05/07/2010 01:33:19 PM)


    謝謝、多捧場。
  • 訪客
  • 那有沒有可能 把圖片放大呢

    還是只能把原圖放大 在放上去?

    你的文字讓人一看就懂=ˇ=~