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

(12/11/01 11:32), John Hax wrote:
> 按照现在的规定，bg-pos和bg-size都是相对于bg-origin的，所以两个分别相对
> 于不同的box，在不修订bg-origin的前提下应该是不可能的吧。

可是 bg-origin 可以修訂啊。正確的說法是要讓 bg-pos 和 bg-size 不是都相對
於「背景定位區域（background positioning area）」就行了，頂多是多定義一
個「背景大小決定區域（background postioning area）」術語。

這真的是怎麼樣都好，我的建議是不要管規範是怎麼寫的。這個討論串的標題我本
來想取《'background-attachment: local' 背景的背景定位區域》，後來想想實在
不需要拘泥在既有術語上。

> 而且现在对local时的pos/size似乎是完全语焉不详。

因為規範不過是一種比較高級的文檔，css-ui-3 的情況更遭[1]，不過別浪費時間
吐嘈了。

> 从默认行为来说，我个人觉得都相对于内部尺寸会比较容易理解。

我覺得相對於不同的東西也不會特別難理解耶，不過這個有爭議，最好是多看一些
例子。

在[2]的例子裡，背景是用

  background-size: 100% 100%;

這在 Opera 和 IE 的問題是往下卷之後就發現文字超過背景了。WebKit 乍看之下
沒有問題，不過假如你多輸入一點內容，你就會發現那個背景圖片被拉扯得實在很
難看。

嚴格來說我覺得兩個行為都有問題，這個使用情景我覺得還是應該用
'background-repeat: y-repeat' 而不是用 y 方向上的 'background-size:
100%'。認真要選一邊的話，可能 WebKit 的行為比較能接受吧，所以可以投
「'background-position/size' 都相對內部尺寸計算」一票。


可是我又想到一個新的論述了：

假如你本來原有一個 'backgrond-attachment: scroll' 背景，現在你想要改成
'backgrond-attachment: local'，假如「背景大小決定區域」會改變的話，背景
圖片可能就會變大甚至是拉扯到不能看的地步，這是可以接受的嗎？

例子一：

#logo {
  background-postion: top left;
  background-size: 20% 10%; /* 別問我為什麼要用 %，我不知道，用
                               'cover' 也有一樣的問題 */
}

從 'scroll' 轉成 'local' 的話，定位位置不變，如果「背景大小決定區域」會
更動的話，圖片的尺寸會隨內部尺寸不規則更動，反之圖片尺寸不會變。

例子二：

#logo {
  background-postion: bottom right;
  background-size: 20% 10%; /* 別問我為什麼要用 %，我不知道，用
                               'cover' 也有一樣的問題 */
}

從 'scroll' 轉成 'local' 的話，定位會從原來從外面看來的右下角變成裡面的
右下角（這應該是可以接受的），如果「背景大小決定區域」會更動的話，圖片的
尺寸會隨內部尺寸不規則更動，否則圖片尺寸不會變。


從這種作法來考慮的話，是不是「'background-position' 相對內部尺寸計
算，'background-size' 相對外部尺寸計算。」也不錯？而且優雅退化到不支援
'local' 的瀏覽器也比較簡單？

另外一種想法是把 'scroll' 的「背景大小決定區域」和「背景定位區域」都改成
內部尺寸，不過我猜這個不向後兼容吧，'scroll' 的歷史太悠久了。

> 最终解决方案或许是弄出这样的bg-origin：
>
> background-origin: inner-box, inner-box padding-box
>
> 规定attachment为local时，positioning和sizing默认用inner-box。或者叫
> local-box？叫scroll-box本来也行，但是已经有attachment:scroll了，

說好不提新方案的，要提新方案最好開一串新的討論串吧，最好附一些例子佐證這
真的是有用的。然後語法也些清楚一點（預設是 inner 所以還要一個 outer）。

> 顺便说那个值太扯淡了，叫scroll但是行为是no scroll！

嗯，的確。我猜這個命名的由來是：「背景貼在（attach）捲軸（scroll）上」，
因為捲軸是外面盒的一部分，所以是不跟隨裡面的盒動的，不過這樣說也估計是
'background-attach: border' 比較合理一點，'fixed' 也應該是
'background-attach: viewport'，不管怎麼樣，這兩個值得歷史太悠久了，不想
管這個問題了，'scroll' 是預設值，基本也不應該用到的。


[1] http://lists.w3.org/Archives/Public/public-html-ig-zh/2012Feb/0036
[2]
http://www.w3.org/Talks/2012/0913-CSS-Amsterdam/demo-backgrounds/demo-bg-attachment.html


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

Received on Thursday, 1 November 2012 07:45:12 UTC