HTML網頁背景固定的測試~

 

background設定背景圖片不隨捲軸移動的語法bgproperties="fixed"(bgproperties='fixed')
因為不合W3C(World Wide Web)的HTML/XHTML的標準,所以FF不支援~
一向很喜歡(!?)W3C的FF,只需點工具列即能驗證哩XD(是有裝擴充套件啦XD)

[Invalid] Markup Validation of blog - W3C Markup Validator.png 

 

當然也可以從官網進入W3C的驗證服務:
The W3C Markup Validation Service http://validator.w3.org/ 

there is no attribute BGPROPERTIES.png

 

上圖的英文複製貼上:

Line 24, Column 180: there is no attribute "BGPROPERTIES"

…position:bottom center;' bgcolor='' bgproperties='fixed' background="./bg.gif">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

英文苦手(喂XD),隨意瀏覽後...什麼marginheigh...算了跳過XD

總之,貌似可行的方法:把bgproperties="fixed"(或bgproperties='fixed' 
改為可以併入style的background-attachment : fixed 即可,以下實測。

 

 

【測試01】bgproperties="fixed" 

背景原始碼 <body bgcolor=#828282 background="bg.jpg" style="background-repeat:no-repeat; background-position:bottom center;" bgproperties="fixed">

(其實我不太清楚左右括號一點'sample.jpg'」與兩點「"sample.jpg"到底有何差異...我用兩點單純因為打久語法眼睛會有點瞎~小小的一點看不清楚XD|||)(不過在W3C的XHTML標準,參數值一定要用引號框起。)

Chrome14:背景固定。               FF6:沉在湖底(因為設定bottom)。
T-001-01-FF和Chrome_調整大小.png

IE8:固定。                     IE6:固定。
T-001-02-ie8和ie6_調整大小.png

測試頁01(html上傳到hinet個人網站,存活日不定@@)

 

 

【測試02】background-attachment:fixed 

背景原始碼 <body bgcolor=#828282 background="bg.jpg" style="background-repeat:no-repeat; background-position:bottom center; background-attachment:fixed; " >

Chrome14:背景固定。               FF6:固定。
T-002-01-FF和Chrome_調整大小.png

IE8:固定。                     IE6:固定。
T-002-02-ie8和ie6_調整大小.png

測試頁02(html上傳到hinet個人網站,存活日不定@@)  

 

 

【測試03】縮寫 

背景原始碼 <body style="background: url(bg.jpg) #828282 bottom center fixed no-repeat; " >

(縮寫~是因為我用純文字文件打CSS,相同效果~當然能少打則少打XD(本網誌樣式的CSS兩萬多字了呢...),少打字省腕力省眼力,日後修改也較清晰明瞭,還有壓縮CSS的功用(雖然只差幾KB罷了XD)~與其交給有亂刪字風險的css compressor(),我寧可自己自己手動壓縮XD 不過也僅限容易記的啦,如#000000(黑色)#000;margin: 5px  10px 5px 10px(上又下左 順時針)。但font-weight:bold(粗體字)font-weight:700這種辨識困難又只省一個字的就...)

Chrome14:背景固定。               FF6:固定。
T-003-01-FF和Chrome_調整大小.png

IE8:固定。                     IE6:固定。
T-003-02-ie8和ie6_調整大小.png

測試頁03(html上傳到hinet個人網站,存活日不定@@)   

 

 

【測試04】縮寫+取消fixed 

背景原始碼 <body style="background: url(bg.jpg) #828282 bottom center no-repeat; " >

Chrome14:沉。                 FF6:沉。
T-004-01-FF和Chrome_調整大小.png

IE8:沉。                     IE6:沉。
T-004-02-ie8和ie6_調整大小.png

測試頁04(html上傳到hinet個人網站,存活日不定@@) 




 

 

 

 

 

 

 

以下請不用管XD 只是順便練習如何在網誌內文插入有卷軸、有背景的獨立區塊XD 

textarea:在網誌後台內文編輯頁上無法打字(要開HTML才行),但這裡卻可以打字上去(雖然打上去也不能幹嘛XD)分行不用<br>或<br />而是直接在HTML按enter,所見即所得。框內文字在某些瀏覽器(如FF)不服從網誌樣式設定。

原始碼
<textarea style="width: 450px; height: 200px; overflow: auto; background: url(http://pic.pimg.tw/smallwu36/1209496691.jpg) no-repeat scroll 50% 130% #fff;border: 3px dashed #274652;">

          第 I 行  (v ^3゚)ノ☆
          第 II 行  (v ^3゚)ノ☆
          第 III 行  (v ^3゚)ノ☆

</textarea>

 

 

div:div內依一般HTML打法。




               第 I 行  (v ^3゚)ノ☆

               第 II 行  (v ^3゚)ノ☆

               第 III 行  (v ^3゚)ノ☆

               第 IV 行  (v ^3゚)ノ☆

               第 V 行  (v ^3゚)ノ☆

               第 VI 行  (v ^3゚)ノ☆

               第 VII 行  (v ^3゚)ノ☆

               第 VIII 行  (v ^3゚)ノ☆

               第 IX 行  (v ^3゚)ノ☆

               第 X 行  (v ^3゚)ノ☆

               第 XI 行  (v ^3゚)ノ☆

               第 XII 行  (v ^3゚)ノ☆

               第 XIII 行  (v ^3゚)ノ☆

               第 XIV 行  (v ^3゚)ノ☆

               第 XV 行  (v ^3゚)ノ☆

               第 XVI 行  (v ^3゚)ノ☆

               第 XVII 行  (v ^3゚)ノ☆

               第 XVIII 行  (v ^3゚)ノ☆

               第 XIX 行  (v ^3゚)ノ☆

               第 XX 行  (v ^3゚)ノ☆


ヽ (゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ (゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ (゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ (゚∀。)ノ呀比ヽ(゚∀。)ノ呀比ヽ(゚∀。)ノ

 

原始碼
<div style="width: 450px; background: url(http://pic.pimg.tw/smallwu36/1209496691.jpg) no-repeat scroll 50% 130% #ffffff; height: 200px; overflow: auto; border: 3px dashed #274652;">

                       <br /><br />
               第 I 行  (v ^3゚)ノ☆ <br /><br />
               第 II 行  (v ^3゚)ノ☆ <br /><br />
               第 III 行  (v ^3゚)ノ☆ <br /><br />

</div>

 

 

 

 

arrow
arrow
    全站熱搜

    小無 發表在 痞客邦 留言(1) 人氣()