MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2025-08-21, 13:14

檢視沒有回覆的主題 | 檢視最近討論的主題


MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時





發表新文章 這個主題已被鎖定，您不能編輯或回覆這個主題。  第 1 頁 (共 1 頁)
  [ 15 篇文章 ] 
  列印模式 上一個主題 | 下一個主題 
發表人 內容
Seiken
文章發表於 : 2007-02-06, 10:27 
離線

註冊時間: 2005-02-26, 15:19
文章: 28
來自: Taiwan, R.O.C.
背景圖可以用background-position來調整位置
一般的情況下position的原點是以該CSS區塊開始算
但是如果又用了background-attachment: fixed;的話
在IE中還是一樣，而在Firefox裡就會變成以瀏覽器來定義原點
翻翻規格書也沒有提到這點，請問有沒有辦法可以調回來？
例如指定背景圖的起始點等等
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
 個人資料  
 
Seiken
 文章主題 :
文章發表於 : 2007-02-06, 10:40 
離線

註冊時間: 2005-02-26, 15:19
文章: 28
來自: Taiwan, R.O.C.
自己先想了一個笨方法
就是讓原來的區塊保持透明
背後再放專門用來裝背景圖的區塊
這樣就沒有需要用到fixed屬性了
不過還是想知道有沒有CSS規範內的方法
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
 個人資料  
 
訪客
 文章主題 :
文章發表於 : 2007-02-06, 10:46 
看不懂你想做什麼,
不過關於 fixed, css 2.1 有寫

If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll').
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
  
 
Seiken
 文章主題 :
文章發表於 : 2007-02-06, 20:07 
離線

註冊時間: 2005-02-26, 15:19
文章: 28
來自: Taiwan, R.O.C.
Anonymous 寫:
看不懂你想做什麼,
不過關於 fixed, css 2.1 有寫

If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll').

您提到的是attachment的基本用法
和我的問題沒有關係

要更詳細解釋這個問題的話，那就只好舉例了
<body>
<div id="sample" style="
top: 10px; left: 10px;
height: 100px; width: 100px;
background-image: url(blablabla.jpg);
background-position: -10px -10px;
">
</div>
</body>

相信各位看得出來position -10是為了看起來起點像在body
如果只有一個div那麼直接修圖比較快，但是如果有很多div
那麼還是用css定位比較方便了

以上的css可以營造出像是窗口的效果
而當視窗可能捲動時，那麼不可避免地要加入
background-attachment: fixed;
這時候問題就來了，在Firefox裡面背景的位置這時會改變
fixed後背景的position原點並不是從上例的#sample開始算
而是body，加入fixed之後上例的背景會往左和上各移動10px
等於起點是body開始算-10px, -10px的位置了

這樣有人看懂了嗎？
我希望能和IE一樣fixed過的背景仍然用區塊本身的座標起算
或是其他兩者一致、而且符合標準的CSS方式來讓定位相符
有這樣的東西嗎

有另一個解決方法是用frame或iframe
好像frame內的背景圖position就會由該frame左上角開始算
但是為了這種理由塞一堆frame好像不太適合
相較之下第二篇提到的背景專用區塊法好多了

順便一提，background的屬性我有寫成一行過
顯示出來的結果是一樣的

順便一提2，IE6.0真的可以跑出fixed的效果
雖然還是不太清楚為什麼有些網頁可以又有些不行
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
 個人資料  
 
Amauds
 文章主題 :
文章發表於 : 2007-02-06, 20:53 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
好像看過類似的討論文章,
Firefox 對 fixed 解譯比較接近 css 定義

另可參考 http://blog.roodo.com/jaceju/archives/91923.html

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴；其實從未曾真實的存在過。
圖檔圖檔
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
 個人資料  
 
不惑仔Boohover
 文章主題 :
文章發表於 : 2007-02-07, 01:17 
離線

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩
Seiken 寫:
Anonymous 寫:
看不懂你想做什麼,
不過關於 fixed, css 2.1 有寫

If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll').

您提到的是attachment的基本用法
和我的問題沒有關係

要更詳細解釋這個問題的話，那就只好舉例了

恕下略~


背景fixed本來就是參照「viewport」，在瀏覽器中指的就是視窗(也就是html)，是
ie6錯誤執行(ie7已修正此錯誤)，請先了解此點，和你的問題非常有關，並不是以所在的block為參照。

根據你的不完整的例子及不清楚的描述猜測，並解決如下：

原html大致如下
代碼:
<body>
<div id="sample">
 內容
</div>
</body>


css設計如下
代碼:
#sample{
position:absolute;
top:10px;
left:10px;
width:100px;
height:100px;
overflow:auto;
background:url(blablabla.jpg) -10px -10px no-repeat fixed;/*讓ie6能有固定在#sample的效果*/
}
html>body #sample{background-attachment:scroll;}
/*實際上預設的scroll就是固定在該區塊中了，本來就不需要定義成fixed，所以此項讓ie6以外回到正常狀態*/

_________________
時間，人為與自然的衝突。~不惑仔
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
 個人資料  
 
Seiken
 文章主題 :
文章發表於 : 2007-02-07, 10:30 
離線

註冊時間: 2005-02-26, 15:19
文章: 28
來自: Taiwan, R.O.C.
原來viewport是專指可視範圍
之前我沒有了解清楚，確實是IE6.0沒有正確執行
不過您的處理方式變成只有IE有fixed，其他的瀏覽器反而「回到正常狀態」了
如果把最後那行改成以viewpoint為基準的position應該就行了

又找到了這篇文章
它是用Javascript的方法來達成的

似乎沒有辦法光明正大地用CSS解決呢
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
 個人資料  
 
風痕影
 文章主題 :
文章發表於 : 2007-02-07, 12:53 
離線
[MozTW 版主群]
頭像

註冊時間: 2004-11-17, 09:53
文章: 1302
來自: 臺灣桃園
Seiken 寫:
如果把最後那行改成以viewpoint為基準的position應該就行了

不行，那樣會變成看到背景圖一直停在頁面上同一個位置 ＠＠"
而不是只停在 #sample 裡...

我剛才用 IE 6、IE 7、Opera 9.02、Firefox 2 試過樓上的解法
只有 IE 才會在 #sample 裡頭的捲軸捲動時無法固定背景圖...
其他瀏覽器的顯示結果都和設了 fixed 後的 IE 一樣 ^^

_________________
在靜謐的國度裡，擁抱微風－－抱風伴靜
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
 個人資料  
 
訪客
 文章主題 :
文章發表於 : 2007-02-07, 13:37 
你是想讓 div 內的背景不要動吧,
我偷懶, 沒去試, 但看各位的討論, firefox ie7 opera9 原本就不動, ie6 要加 fixed,
那就用 hack 的寫法混過去就好了,
當然能寫二份 ,.css 最好.
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
  
 
skyfate
 文章主題 :
文章發表於 : 2007-02-16, 16:06 
離線

註冊時間: 2005-03-04, 07:31
文章: 9
來自: 鄉間小路
Seiken 寫:
背景圖可以用background-position來調整位置
一般的情況下position的原點是以該CSS區塊開始算
但是如果又用了background-attachment: fixed;的話
在IE中還是一樣，而在Firefox裡就會變成以瀏覽器來定義原點
翻翻規格書也沒有提到這點，請問有沒有辦法可以調回來？
例如指定背景圖的起始點等等


1.
代碼:
div#test {…} /* For All */

2.
代碼:
* html div#test {…} /* For IE Only */


　　2.是只有 IE 看得懂，所以可以使用這個方式來「修正」。而在 1. 中， IE 可以正確執行的話，那就不必重複寫在 2. 中。(注意 1. 與 2. 的前後順序)
回頂端
Mozilla/5.0 (Windows; U; Win 9x 4.90; zh-TW; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
 個人資料  
 
Amauds
 文章主題 :
文章發表於 : 2009-03-25, 13:02 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
以往 2.0 時背景可以用 fixed 屬性固定住,
現在用 3.0 背景圖會跟著捲動,
這是 firefox 對 css 解釋有所更動嗎?

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴；其實從未曾真實的存在過。
圖檔圖檔
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.0; zh-TW; rv:1.9.0.6) Gecko/2009020711 Minefield/3.0.6 (tete009 SSE PGO)
 個人資料  
 
風痕影
 文章主題 :
文章發表於 : 2009-03-25, 16:17 
離線
[MozTW 版主群]
頭像

註冊時間: 2004-11-17, 09:53
文章: 1302
來自: 臺灣桃園
Amauds 寫:
以往 2.0 時背景可以用 fixed 屬性固定住,
現在用 3.0 背景圖會跟著捲動,
這是 firefox 對 css 解釋有所更動嗎?

有沒有範例網頁呢？因為我前幾天才試過
是可以不跟著捲動的耶 ＝　　　＝"

_________________
在靜謐的國度裡，擁抱微風－－抱風伴靜
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7
 個人資料  
 
Amauds
 文章主題 :
文章發表於 : 2009-03-25, 17:30 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
風痕影 寫:
有沒有範例網頁呢？因為我前幾天才試過
是可以不跟著捲動的耶 ＝　　　＝"

http://blog.roodo.com/amauds/
IE6 背景是固定的,
不知道跟樂多改版有沒有關係?
太久沒修這邊的版型了.

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴；其實從未曾真實的存在過。
圖檔圖檔
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.0; zh-TW; rv:1.9.0.6) Gecko/2009020711 Minefield/3.0.6 (tete009 SSE PGO)
 個人資料  
 
Coopoo
 文章主題 :
文章發表於 : 2009-03-25, 21:48 
離線

註冊時間: 2002-10-20, 02:29
文章: 1497
Amauds 寫:
http://blog.roodo.com/amauds/
IE6 背景是固定的,
不知道跟樂多改版有沒有關係?
太久沒修這邊的版型了.

檢查一下你的 userContent.css 或是 Stylish 吧。 :)
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7
 個人資料  
 
Amauds
 文章主題 :
文章發表於 : 2009-03-26, 22:33 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
可能真的是 userContent.css 的關係,
引入太多檔案了, 待會再重啟 firefox 試試.

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴；其實從未曾真實的存在過。
圖檔圖檔
回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.8pre) Gecko/2009021912 GranParadiso/3.0.8pre (ayakawa PGU)
 個人資料  
 
顯示文章 :  排序  
發表新文章 這個主題已被鎖定，您不能編輯或回覆這個主題。  第 1 頁 (共 1 頁)
  [ 15 篇文章 ] 

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時


誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員 和 12 位訪客

您 不能 在這個版面發表主題
您 不能 在這個版面回覆主題
您 不能 在這個版面編輯您的文章
您 不能 在這個版面刪除您的文章
您 不能 在這個版面上傳附加檔案

搜尋:
前往 :  
Powered by phpBB® Forum Software © phpBB Group
正體中文語系由 竹貓星球 維護製作
© moztw.org, Mozilla Foundation
MozTW，Mozilla 台灣社群