'background-attachment: local' 背景的 'background-postion/size' 尺寸的計算方式

我們知道一個可以捲動的元素有兩個尺寸：外部的（clientHeight/clientWidth）
和內部的（scrollHeight/scrollWidth），內部的尺寸比較大。這裡的問題是：

  一個可以捲動元素上的 'background-attachment: local' 背景的
  'background-position' 與'background-size' 裡的百分比值的計算應該相對外部
  尺寸還是內部尺寸呢？

請看測試案例[1]。



（以下假設 'background-repeat' 是 'no-repeat'，因為現代的網頁用 'repeat'
背景的好像比較少？ ）

我個人認為 'background-attachment: local' 背景的 'bckground-position' 裡
的 % 的計算很明顯應該相對於內部尺寸。假如 % 的計算是相對於外部尺寸，又是
使用 0～100%（正常情況），那就會變成背景只出現在未捲動的時候能看到的哪一
塊，捲過了那一塊之後就完全看不看到背景了。也就是，也不能用
'background-postion: center 100%' 之類的置（內部的）底。

上述狀況出現在 Lea Verou 用 'background-attachment: local' + 漸層實作捲
軸陰影的使用情景[2]裡：

  background:
    /* 蓋住陰影的部份 */
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
  
    /* 陰影 */
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side 50% 100%, rgba(0,0,0,.2),
rgba(0,0,0,0)) 0 100%;

其中 0 100% 的部份是需要置（內部）底的。又目前只有 WebKit 是相對於內部尺
寸計算的，IE9 和 Opera 12 都不是，所以這個技巧目前也只有在 WebKit 上能
用，在 IE9 和 Opera 12 下就算捲到最底部，底部的陰影還是不會被蓋掉。（也
就是原文作者根本沒測 IE9 和 Opera 12...）



但是 'background-size' % 的計算該相對於那個尺寸我就沒那麼確定。目前實作
上也是 WebKit 用內部，其他瀏覽器用外部的情形。我覺得 'background-size'
可以相對於*外面尺寸*計算的兩個理由：

1. 大小穩定

一般來說外部尺寸就是固定的，內部尺寸隨裡面內容加多可能會加大，不好控制。
如果 'background-size' 使用 % 值的話，代表背景大小可能會隨內容加大而加
大，可能造成圖片扭曲之類沒有預期的狀況。請參考[1]後面的例子。

2. 功能

如果需要 'background-position' 和 'background-size' 都相對於內部尺寸計
算，大可以在有捲軸的元素裡用一個沒捲軸的元素把所有內容包起來，再把背景放
在那個沒捲軸的元素裡就好了。功能重複。



不過 'background-size' 和 'background-position' % 按照不同的矩形計算好像
會蠻奇怪的。大家怎麼想？有沒有什麼使用情景可以說明一下怎麼樣比較好？

在 Lea 的例子裡是用了：

  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

其中 100% 40px 是「蓋住陰影的部份」，也就是用 'background-attachment:
local' 的，那一塊的寬度的需要是*內部尺寸*的的寬，不然在兩的方向都有捲軸
的時候，會在捲到某些地方的時候陰影沒被蓋掉。所以可以說 Lea 的例子給
「'background-position/size' 都相對內部尺寸計算」一票。

不過話說回來，就算是「'background-position' 相對內部尺寸計
算，'background-size' 相對外部尺寸計算。」的行為，只要把 Lea 的例子改成

  background-size: 1px 40px, 1px 40px
  backgorund-repeat: repeat-x, repeat-x

就好了，因為基本上「蓋住陰影的部份」本來就只是一塊沿著水平軸重複的漸層而
已、、、

（對了，這裡討論的是 'background-attachment: local' 的預設行為，先不管可
以加新的語法包含所有情況的可能性、、、）



目前的規範基本上沒什麼參考價值（否則應該就不會有行為差這麼多的兩種實作了）。


另外一個比較小的問題：因為 WebKit 全部都是從*內部*來，所以
'background-clip: content' 也是用內部的內容邊去切背景（[1]裡面一開始底部
的邊框碰到黃色背景了，而不是隔一個內邊距）。我是覺得這裡也可以用外部的內
容邊去切，不過這個問題我是覺得怎麼樣都好。


ps. 這是我難得發現到的比較有實用性而且有不兼容的標準問題，一般我發現的不
兼容會出現的可能性都蠻低的......

ps2. Cc+ 錦江，因為我發現錦江有出現在 Lea 的文章裡 :p



[1]
http://lists.w3.org/Archives/Public/www-archive/2012Oct/att-0130/background-attachement-local-positioning-area
[2] http://lea.verou.me/2012/04/background-attachment-local/


以上

Kenny
-- 
Web Specialist, Oupeng Browser, Beijing
Try Oupeng: http://www.oupeng.com/

Received on Wednesday, 31 October 2012 19:17:17 UTC