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

CSS定位背景圖的問題
https://forum.moztw.org/viewtopic.php?f=13&t=17549		 第 1 頁 (共 1 頁)
發表人:  Seiken [ 2007-02-06, 10:27 ]
文章主題 :  CSS定位背景圖的問題
背景圖可以用background-position來調整位置
一般的情況下position的原點是以該CSS區塊開始算
但是如果又用了background-attachment: fixed;的話
在IE中還是一樣，而在Firefox裡就會變成以瀏覽器來定義原點
翻翻規格書也沒有提到這點，請問有沒有辦法可以調回來？
例如指定背景圖的起始點等等
發表人:  Seiken [ 2007-02-06, 10:40 ]
文章主題 : 
自己先想了一個笨方法
就是讓原來的區塊保持透明
背後再放專門用來裝背景圖的區塊
這樣就沒有需要用到fixed屬性了
不過還是想知道有沒有CSS規範內的方法
發表人:  訪客 [ 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').
發表人:  Seiken [ 2007-02-06, 20:07 ]
文章主題 : 
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的效果
雖然還是不太清楚為什麼有些網頁可以又有些不行
發表人:  Amauds [ 2007-02-06, 20:53 ]
文章主題 : 
好像看過類似的討論文章,
Firefox 對 fixed 解譯比較接近 css 定義

另可參考 http://blog.roodo.com/jaceju/archives/91923.html
發表人:  不惑仔Boohover [ 2007-02-07, 01:17 ]
文章主題 : 
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以外回到正常狀態*/
發表人:  Seiken [ 2007-02-07, 10:30 ]
文章主題 : 
原來viewport是專指可視範圍
之前我沒有了解清楚，確實是IE6.0沒有正確執行
不過您的處理方式變成只有IE有fixed，其他的瀏覽器反而「回到正常狀態」了
如果把最後那行改成以viewpoint為基準的position應該就行了

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

似乎沒有辦法光明正大地用CSS解決呢
發表人:  風痕影 [ 2007-02-07, 12:53 ]
文章主題 : 
Seiken 寫:
如果把最後那行改成以viewpoint為基準的position應該就行了

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

我剛才用 IE 6、IE 7、Opera 9.02、Firefox 2 試過樓上的解法
只有 IE 才會在 #sample 裡頭的捲軸捲動時無法固定背景圖...
其他瀏覽器的顯示結果都和設了 fixed 後的 IE 一樣 ^^
發表人:  訪客 [ 2007-02-07, 13:37 ]
文章主題 : 
你是想讓 div 內的背景不要動吧,
我偷懶, 沒去試, 但看各位的討論, firefox ie7 opera9 原本就不動, ie6 要加 fixed,
那就用 hack 的寫法混過去就好了,
當然能寫二份 ,.css 最好.
發表人:  skyfate [ 2007-02-16, 16:06 ]
文章主題 : 
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. 的前後順序)
發表人:  Amauds [ 2009-03-25, 13:02 ]
文章主題 : 
以往 2.0 時背景可以用 fixed 屬性固定住,
現在用 3.0 背景圖會跟著捲動,
這是 firefox 對 css 解釋有所更動嗎?
發表人:  風痕影 [ 2009-03-25, 16:17 ]
文章主題 : 
Amauds 寫:
以往 2.0 時背景可以用 fixed 屬性固定住,
現在用 3.0 背景圖會跟著捲動,
這是 firefox 對 css 解釋有所更動嗎?

有沒有範例網頁呢？因為我前幾天才試過
是可以不跟著捲動的耶 ＝　　　＝"
發表人:  Amauds [ 2009-03-25, 17:30 ]
文章主題 : 
風痕影 寫:
有沒有範例網頁呢？因為我前幾天才試過
是可以不跟著捲動的耶 ＝　　　＝"

http://blog.roodo.com/amauds/
IE6 背景是固定的,
不知道跟樂多改版有沒有關係?
太久沒修這邊的版型了.
發表人:  Coopoo [ 2009-03-25, 21:48 ]
文章主題 : 
Amauds 寫:
http://blog.roodo.com/amauds/
IE6 背景是固定的,
不知道跟樂多改版有沒有關係?
太久沒修這邊的版型了.

檢查一下你的 userContent.css 或是 Stylish 吧。 :)
發表人:  Amauds [ 2009-03-26, 22:33 ]
文章主題 : 
可能真的是 userContent.css 的關係,
引入太多檔案了, 待會再重啟 firefox 試試.
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/