[公告] 痞客豐年終!萬元禮券限量送~[公告] 第一屆痞客邦金點賞登場!2014年最有影響力的部落格即將揭曉[公告] 痞客邦新服務上線 每日星座運勢測算【得獎名單公佈】[公告] 痞客邦應用市集全新改版![公告] 痞客邦「應用市集」新 App 上架-iFontCloud Professional
版權所有+保留所有權利_+_+_
© 2010-2014 Created by Be Myself Inc. 如我協力創意工作室
**版權說明**
-- 我們提供與設計的噗版CSS內容僅供個人自用,請勿改製再分享或用於商業用途 --
((請勿將全部或部份內容直接取用當作自己的設計))
-- 除了個人噗版自用外(修改請註明原CSS碼出處),其它使用方式均未授權,還請務必注意,勿侵權喔~--

問/Q:如果想要把背景改成能符合螢幕大小有辦法改嗎?

答/A:

因為每個人電腦螢幕的解析度不同,從1024x768到2560x1440都有,而我所使用的筆電是1280x800,慣用的瀏覽器是火狐,所以通常設計噗版的樣式呈現以此為準,如果要調整背景圖大小來符合使用者螢幕,之前的做法是,將原圖另存新檔後再自行縮放調整、上傳到圖片空間取得直接連結,然後更改語法中的背景圖網址

(1) 一般解法

body, html
{
    background:url(http://替換圖片網址放這) left top no-repeat;
}

或是固定背景圖,讓下方高度不足的問題能夠解決

body, html
{
    background:url(http://原圖網址) left top no-repeat;
    background-attachment:fixed;   /*固定背景*/
}

(2) 應用新語法

現在,因為 CSS 3 的出現,有能夠調整背景圖大小的語法囉~ ^ ^

body, html
{
    background:url(http://原圖網址) left top no-repeat;
    -o-background-size:1920px 1200px;   /*x軸y軸寬高*/
    -webkit-background-size:1920px 1200px;
    -moz-background-size:1920px 1200px;

}

可以指定縮放它的寬(1920px)高(1200px)到符合使用者螢幕的尺寸,
不過圖片顯示的品質還是會因為放大而變差,也要注意比例上的問題以避免變形。

目前只有少部份最新版本的瀏覽器能夠正確解讀並呈現CSS3的效果,火狐 3.6 以後版本測試確定可以呈現。
如果你所使用的瀏覽器無法正確解讀,或是對圖片解析度的要求較高,還是需要用(1)換圖的方式來解決背景大小的問題喔!

 

噗版舉例:St. Cang Reming

原本噗版的截圖 (以1024x768尺寸截圖,原背景圖片大小1280x800)

St. Cang Reming

 

調整後噗版的截圖 (以1024x768尺寸截圖)

調整背景圖大小

 

使用寬螢幕的朋友可以試試看喔

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


open trackbacks list Trackbacks (0)

留言列表 (23)

Post Comment
  • Private Comment
  • cindy930526
  • 感謝!!!!
    這個問題是個大麻煩呢(跪拜
  • 煌
  • -o-background-size:
    -webkit-background-size:
    -moz-background-size:

    請問這三個哪個是調圖片大小哪個是調解析度啊
    因為我把數字全改1024X768時
    還是會有一大塊白色
    可我電腦解析度是這數字沒錯(從內容->設定這邊看來的)
  • 這三個均是調圖片大小的語法,給不同瀏覽器解讀用的。
    噗浪的視窗高度會比螢幕解析度更高些,下方資訊列內容長度也會影響到高度,所以,要設比解析度更高的數值才會蓋住底色。或是用此文內有說的 background-attachment:fixed; /*固定背景*/ 來解決。

    M6 replied in 2011/03/27 00:48

  • 漾藍
  • 請問...
    我改完大小之後,拉河道就變得很LAG
    為什麼會這樣呢QQ?
  • 可能瀏覽器讀取該部份語法會慢慢,更新到瀏覽器最新版本試試呢?

    M6 replied in 2011/08/27 08:55

  • 漾藍
  • 換瀏覽器之後就沒有問題了
    謝謝!!!
  • Private Comment
  • beehong0523
  • 請問為什麼換了之後背景會變全灰了?0.0
  • ?是換什麼?語法內容是?
    要看語法內容才知道問題在哪裡ㄛ

    M6 replied in 2011/11/12 18:28

  • joyce840120
  • 不好意思我想請問一下如果我想讓我的背景是一整頁填滿的
    而不是重複出現那該怎麼用才可以呢?
  • 語法中的 no-repeat; 就是不重複的意思,
    然後根據個人使用的螢幕解析度不同來設定背景圖大小就可以了。

    M6 replied in 2011/12/04 20:50

  • 酷偶 葉
  • 你好,請問有沒有那種只需要放一個大圖網址(像是解析1920x1080的) 然後噗浪就會自動根據螢幕解析度來做縮放的語法呢? 簡單來說就是不管我在1920x1080或1600x900或1366x768的螢幕上,圖片的能見範圍都是一樣的。謝謝^^
  • 嗯,css3有相關語法,但僅限較新版的瀏覽器可以使用,
    語法舉例:
    body, html
    {
    background: url(背景圖網址) left top no-repeat;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    }

    其中 background-size: cover; 就是可依照使用者螢幕解析度來調整背景圖尺寸的語法,
    -moz- 開頭對應火狐瀏覽器,-webkit- 則是Google瀏覽器, -o- 是Opera。

    M6 replied in 2012/04/22 10:00

  • 泠雨星*
  • 請問可以把圖片 (比解析度小) 移到正中間嗎 ?
  • 把 background: url(背景圖網址) left top no-repeat;
    中 left 改成 center 即可

    M6 replied in 2012/04/23 08:55

  • Private Comment
  • Private Comment
  • l2463456
  • 阿阿~終於好了真的是太謝謝你了QAQ
    你的語法真的是太好用啦~~
    我都是靠你的語法來解答的~
    再次感謝((鞠躬
  • : D

    M6 replied in 2012/05/07 14:33

  • Private Comment
  • Private Comment
  • Private Comment
  • 大型貓科動物
  • 板主您好!

    請問有推薦上傳『原尺寸』圖片的網路相簿網站嗎?

    之前曾經試過將圖片改大後上傳google+、Facebook、Flickr等網站,點開下載時是我改大的尺寸,但是『檢視圖片』時都無法原尺寸秀出,以至於拷貝圖片網址貼進語法後,背景圖片是縮小的尺寸。

    或者是我語法上的更改有錯呢?
  • 試試看這個: http://imgur.com

    M6 replied in 2012/06/13 23:52

  • 大型貓科動物
  • 謝謝板主這麼快就回覆!
    明天就來試試看!^^
  • : )

    M6 replied in 2012/06/14 20:43

  • yuheng3987
  • 請問一下這張圖(http://i.imgur.com/0MYor.png)
    白色框框圈起來的地方(也就是背景以外的)
    那個地方要怎麼改顏色?
  • 就是畫面背景 body, html {} 中的底色
    改顏色代碼 background: # 這裡的值即可。

    M6 replied in 2012/06/16 22:37

  • Enduring
  • 請問:如何把PLURK的背景圖都變成一大片(全部都同一張圖)
  • 這篇文章的內容就是在回答這個問題。是語法使用上有什麼問題嗎?

    M6 replied in 2012/09/02 20:13

  • cat81022
  • 請問...為什麼我的噗浪背景----->body, html
    {
    background:url(http://i3.minus.com/jPtWELRlDXMy9.jpg) center top no-repeat;
    background-size: cover;

    背景已經弄成我想要的了 可是為什麼按儲存後,反而是撲浪河道還有主控台那些 本來已經設定好語法 且可以用的不能用了呢?
    EX:原本已經隱藏河道了 可是用了背景的那個語法後 卻不能隱型河道了 拜託囉 版主 > <
  • 語法有加上 } 嗎?
    一段語法要用 { } 包起來才完整喔。
    通常會導致後方語法無法正常顯示,是因為前方的語法有錯誤,請檢查看看是否有忘了加上 } 或是每行收尾的 ; 有否遺漏吧。

    M6 replied in 2013/08/08 07:49

  • cat81022
  • YA~ 終於調好了 真的只要加一個''}'' 那麼簡單結果我搞到要發瘋 謝謝版主囉 ((鞠躬
  • 不客氣 ^w^

    M6 replied in 2013/08/08 17:01

本文章限登入者留言,請您選擇上方任一服務帳號登入。