MozTW 討論區
https://forum.moztw.org/

請教FF中表格背景圖固定的方式
https://forum.moztw.org/viewtopic.php?f=13&t=4099		 第 1 頁 (共 1 頁)
發表人:  dasu88 [ 2004-11-16, 08:15 ]
文章主題 :  請教FF中表格背景圖固定的方式
請問各位：
我設計了一個網頁，利用CSS訂定了一個表格中的背景圖檔，橫向重覆，縱向固定(只顯示一次)，CSS語法如下：

.tbbg01 {
background-attachment: fixed;
background-image: url(images/tb01_r2_c2.jpg);
background-repeat: repeat-x;
font-family: "新細明體";
font-size: 12px;
line-height: 13px;
color: #000000;
text-decoration: none;
}

但這個方法在IE看正常，但在Firefox中看的時候，表格背景圖就不見了，變成一個白色色塊，請問是否Firefox不支援這項CSS語法，是否有其他解決方案?
發表人:  BobChao [ 2004-11-16, 09:21 ]
文章主題 : 
dasu88 寫:
請問各位：
我設計了一個網頁，利用CSS訂定了一個表格中的背景圖檔，橫向重覆，縱向固定(只顯示一次)，CSS語法如下：

.tbbg01 {
background-attachment: fixed;
background-image: url(images/tb01_r2_c2.jpg);
background-repeat: repeat-x;
font-family: "新細明體";
font-size: 12px;
line-height: 13px;
color: #000000;
text-decoration: none;
}

但這個方法在IE看正常，但在Firefox中看的時候，表格背景圖就不見了，變成一個白色色塊，請問是否Firefox不支援這項CSS語法，是否有其他解決方案?


我用起來是 ok, 不過兩種瀏覽器對文件中表格背景設定 fixed 時起始位置的解釋好像不太一樣？mmm 總之我在 IE 跟 Firefox 1.0 中看起來不一樣（但是都有背景圖，沒問題），不知道哪個是你要的。用講的不清楚，你看看就知道：

testcase:
代碼:
<style>
table {
   background-attachment: fixed;
   background-image: url(makemoney.gif);
   background-repeat: repeat-x;
   font-family: "新細明體";
   font-size: 12px;
   line-height: 13px;
   color: #000000;
   text-decoration: none;
}
</style>
<p>1</p><p>1</p><p>1</p><p>1</p>
<table border="1" width="100%" height="50">
<tr><td>sa</td><td class="e">ds</td></tr>
</table>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

圖片自己改成應設的路徑吧


如果 IE 顯示的樣子才是你要的，那請把 background-attachment: fixed; 刪掉
發表人:  dasu88 [ 2004-11-16, 09:35 ]
文章主題 : 
BobChao 寫:
dasu88 寫:
請問各位：
我設計了一個網頁，利用CSS訂定了一個表格中的背景圖檔，橫向重覆，縱向固定(只顯示一次)，CSS語法如下：

.tbbg01 {
background-attachment: fixed;
background-image: url(images/tb01_r2_c2.jpg);
background-repeat: repeat-x;
font-family: "新細明體";
font-size: 12px;
line-height: 13px;
color: #000000;
text-decoration: none;
}

但這個方法在IE看正常，但在Firefox中看的時候，表格背景圖就不見了，變成一個白色色塊，請問是否Firefox不支援這項CSS語法，是否有其他解決方案?


我用起來是 ok, 不過兩種瀏覽器對文件中表格背景設定 fixed 時起始位置的解釋好像不太一樣？mmm 總之我在 IE 跟 Firefox 1.0 中看起來不一樣（但是都有背景圖，沒問題），不知道哪個是你要的。用講的不清楚，你看看就知道：

testcase:
代碼:
<style>
table {
   background-attachment: fixed;
   background-image: url(makemoney.gif);
   background-repeat: repeat-x;
   font-family: "新細明體";
   font-size: 12px;
   line-height: 13px;
   color: #000000;
   text-decoration: none;
}
</style>
<p>1</p><p>1</p><p>1</p><p>1</p>
<table border="1" width="100%" height="50">
<tr><td>sa</td><td class="e">ds</td></tr>
</table>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

圖片自己改成應設的路徑吧


如果 IE 顯示的樣子才是你要的，那請把 background-attachment: fixed; 刪掉


我把background-attachment: fixed這一行刪除，果然就看到背景圖了，不過我還是有些不是很了解為什麼，但無論如何，謝謝您的幫忙。
發表人:  BobChao [ 2004-11-16, 09:43 ]
文章主題 : 
dasu88 寫:
我把background-attachment: fixed這一行刪除，果然就看到背景圖了，不過我還是有些不是很了解為什麼，但無論如何，謝謝您的幫忙。


嗯，其實那行不必要...
你設定上去之後 Firefox 認為起點在頁面頂端、IE 認為在表格頂端 ，於是他們各照自己的模式水平重複背景，偏偏你的表格可能怎麼捲也捲不到頁面頂端去，所以在 Firefox 中就看不到，就這樣...

我自己是打一開始還沒試，就覺得應該是頁面頂端比較正確啦... 這只是直覺沒什麼根據，我沒有細看規格中關於 viewpoint 的部分...
發表人:  訪客 [ 2004-11-16, 16:04 ]
文章主題 : 
dasu88 寫:
我把background-attachment: fixed這一行刪除，果然就看到背景圖了，不過我還是有些不是很了解為什麼，但無論如何，謝謝您的幫忙。


根據 css 的規定，bakcground-attachment: fixed 時，是將背景圖片以 viewpoint 為基準來鎖定，在電腦上看 viewpoint 就是指螢幕的左上角，所以一但設了這個值，背景圖片的左上角都會去鎖定到螢幕的左上角，不論畫面的內容如何捲動。

可是 ie 的做法是，將圖片的左上角鎖定在圖片所處元件的左上角，如你例子中的表格或是表格內的儲存格。這種解讀方式乃違背了 css 的標準。
發表人:  dasu88 [ 2004-11-16, 16:39 ]
文章主題 : 
原來如此，謝謝兩位的指導，讓小弟又學習到一點了。 :D
發表人:  applestyle [ 2006-08-23, 00:34 ]
文章主題 : 
請問依照css的標準
background-attachment: fixed;
只能用在body?
還是也可以用在table 中呢?
因為我發現在FIREFOX和SAFARI中都可以在table 中固定背景圖
可是在IE中只有BODY可以固定
table 中的背景圖卻不能固定
有其他的方法嗎?
發表人:  風痕影 [ 2006-08-28, 11:01 ]
文章主題 : 
applestyle 寫:
請問依照css的標準
background-attachment: fixed;
只能用在body?
還是也可以用在table 中呢?
因為我發現在FIREFOX和SAFARI中都可以在table 中固定背景圖
可是在IE中只有BODY可以固定
table 中的背景圖卻不能固定
有其他的方法嗎?

都可以用，只是，我想就像上面的討論串所說的
IE在固定背景之後，背景的位置算法和標準不太一樣
所以才會造成在body以外的地方設定卻不見效果...
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/