[公告] 痞客邦新服務上線 每日星座運勢測算[公告] 痞客邦應用市集全新改版![公告] 痞客邦「應用市集」新 App 上架-iFontCloud Professional[公告] 痞客邦後台發表文章提供插入多張圖片新功能[公告]痞客邦新服務上線 部落客商店聚集就在《痞市集》

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

((背景系列文章))

【部落格痞客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樣式的規則是適用各個部落格喔!雖然是用痞客做為示範,但無名、天空等各家部落格都是一樣的^^

Posted by sophiestudio at 痞客邦 PIXNET 留言(18) 引用(0) 人氣()


open trackbacks list Trackbacks (0)

留言列表 (18)

Post Comment
  • ajuju630
  • 好用心的文章喔^^
    我也是分享css的部落客
    很高興認識你唷^^
  • 剛開始寫css~~
    我也很高興認識你^.^

    sophiestudio replied in 2010/01/14 00:15

  • woods1
  • 阿~好詳細的說明~,,早點發現就好了.....怎麼晚還沒睡喔
  • 我都很晚睡的
    你不也還沒睡嗎呵呵

    sophiestudio replied in 2010/01/28 03:14

  • woods1
  • 呵~不知~怎麼用的還有亂碼~改不了~
  • 嗯~~亂碼?網站有亂碼啊?

    sophiestudio replied in 2010/01/28 03:25

  • woods1
  • 可能是從~原來的直接復製~貼上~跟~拍賣網不合吧,,,妳是電腦工程師喔~
  • 我是sophie做網頁和平面設計 和電腦相關的是另一位板主灰色金盞花 ^.^

    sophiestudio replied in 2010/01/28 03:50

  • woods1
  • 阿~是喔~直接跳首頁..那妳看不到
  • 嗯啊...可能要給賣場首頁的網址or帳號...

    sophiestudio replied in 2010/01/28 03:52

  • woods1
  • 昨天做圖用到8點才睡...10點又起來談案子~,,,整個人都快掛了
  • 睡不到2小時啊!!!!
    真的會掛....@@

    sophiestudio replied in 2010/01/28 09:55

  • woods1
  • 睡了沒
  • 呼...還沒呢...

    sophiestudio replied in 2010/01/29 02:56

  • Private Comment
  • Private Comment
  • doggydoggy2
  • hiya非, 請問“一定要將圖檔上傳到網路空間”的空間是指哪? 謝謝啦∼
  • 例如痞客的相簿啊^^"
    一定要上傳到網路上
    存在自己的電腦裡不能在網路上使用啊

    sophiestudio replied in 2010/03/26 17:35

  • LA  LA
  • 看到你的文周吸收很多知識~感謝你。但想問說~閃圖可以在"PS"製作成功貼上,但是要怎ㄇ讓他在橫幅閃???
  • 由於你的留言沒有登入,所以我將留言解除悄悄話,這樣子回覆你才看的見。

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

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

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

    或者你將畫面讓我看下?

    ps.photoshop做閃圖 可在ps裡轉imageready做gif動態圖

    sophiestudio replied in 2010/05/07 21:33

  • 訪客
  • 那有沒有可能 把圖片放大呢

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

    你的文字讓人一看就懂=ˇ=~
  • 小雷軍
  • 非常棒格式製作教學 小弟受教了 ^^
  • 愛分享
  • 是從部落格的管理後台 樣式管理 自訂樣式 CSS原始碼編輯 進入嗎?

    可是版面很小 要怎麼樣才能看見所有的編輯

You haven’t logged in yet, please use guest status to leave message. You can also log in with above service account and leave message

other options