按照现在的规定，bg-pos和bg-size都是相对于bg-origin的，所以两个分别相对于不同的box，在不修订bg-origin的前提下应该是不可能的吧。而且现在对local时的pos/size似乎是完全语焉不详。
从默认行为来说，我个人觉得都相对于内部尺寸会比较容易理解。关于重复功能问题，我本来就觉得local就是重复功能，不如快点支持::outer伪元素。不过 multipule background 也是重复功能，所以也无妨，毕竟方便了。 最终解决方案或许是弄出这样的bg-origin： background-origin: inner-box, inner-box padding-box 规定attachment为local时，positioning和sizing默认用inner-box。或者叫local-box？叫scroll-box本来也行，但是已经有attachment:scroll了，顺便说那个值太扯淡了，叫scroll但是行为是no scroll！ 如果要分别设置的话，就弄两个值出来，比如positioning是inner-box，sizing是padding-box……嗯，复杂到我有点抓狂了。 2012/11/1 Kang-Hao (Kenny) Lu <[email protected]> > 我��知道一��可以���拥脑�素有����尺寸：外部的（clientHeight/clientWidth） > 和�炔康模�scrollHeight/scrollWidth），�炔康某叽绫容^大。�@�e的���}是： > > 一��可以���釉�素上的 'background-attachment: local' 背景的 > 'background-position' �c'background-size' �e的百分比值的��算����相�ν獠� > 尺寸��是�炔砍叽缒兀� > > ��看�y��案例[1]。 > > > > （以下假�O 'background-repeat' 是 'no-repeat'，因�楝F代的�W��用 'repeat' > 背景的好像比�^少？ ） > > 我��人�J�� 'background-attachment: local' 背景的 'bckground-position' �e > 的 % 的��算很明�@����相��於�炔砍叽纭＜偃� % 的��算是相��於外部尺寸，又是 > 使用 0～100%（正常情�r），那就����成背景只出�F在未���拥��r候能看到的哪一 > �K，�赃^了那一�K之後就完全看不看到背景了。也就是，也不能用 > 'background-postion: center 100%' 之��的置（�炔康模┑住� > > 上述���r出�F在 Lea Verou 用 'background-attachment: local' + �u����作�� > �S��影的使用情景[2]�e： > > background: > /* �w住��影的部份 */ > 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 下就算�缘阶畹撞浚�底部的��影��是不��被�w掉。（也 > 就是原文作者根本�]�y IE9 和 Opera 12...） > > > > 但是 'background-size' % 的��算��相��於那��尺寸我就�]那�N�_定。目前��作 > 上也是 WebKit 用�炔浚�其他�g�[器用外部的情形。我�X得 'background-size' > 可以相��於*外面尺寸*��算的����理由： > > 1. 大小��定 > > 一般�碚f外部尺寸就是固定的，�炔砍叽珉S�e面�热菁佣嗫赡���加大，不好控制。 > 如果 'background-size' 使用 % 值的��，代表背景大小可能���S�热菁哟蠖�加 > 大，可能造成�D片扭曲之���]有�A期的���r。���⒖�[1]後面的例子。 > > 2. 功能 > > 如果需要 'background-position' 和 'background-size' 都相��於�炔砍叽缬� > 算，大可以在有�暂S的元素�e用一���]�暂S的元素把所有�热莅�起�恚�再把背景放 > 在那���]�暂S的元素�e就好了。功能重�}。 > > > > 不�^ 'background-size' 和 'background-position' % 按照不同的矩形��算好像 > ���U奇怪的。大家怎�N想？有�]有什�N使用情景可以�f明一下怎�N�颖容^好？ > > 在 Lea 的例子�e是用了： > > background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; > > 其中 100% 40px 是「�w住��影的部份」，也就是用 'background-attachment: > local' 的，那一�K的��度的需要是*�炔砍叽�*的的��，不然在�傻姆较蚨加��暂S > 的�r候，��在�缘侥承┑胤降��r候��影�]被�w掉。所以可以�f Lea 的例子�o > 「'background-position/size' 都相���炔砍叽缬�算」一票。 > > 不�^���f回�恚�就算是「'background-position' 相���炔砍叽缬� > 算，'background-size' 相�ν獠砍叽缬�算。」的行�椋�只要把 Lea 的例子改成 > > background-size: 1px 40px, 1px 40px > backgorund-repeat: repeat-x, repeat-x > > 就好了，因�榛�本上「�w住��影的部份」本�砭椭皇且��K沿著水平�S重�}的�u�佣� > 已、、、 > > （�α耍��@�e����的是 'background-attachment: local' 的�A�O行�椋�先不管可 > 以加新的�Z法包含所有情�r的可能性、、、） > > > > 目前的����基本上�]什�N�⒖��r值（否�t����就不��有行�椴钸@�N多的�煞N��作了）。 > > > 另外一��比�^小的���}：因�� WebKit 全部都是��*�炔�*�恚�所以 > 'background-clip: content' 也是用�炔康��热葸�去切背景（[1]�e面一�_始底部 > 的��框碰到�S色背景了，而不是隔一���冗�距）。我是�X得�@�e也可以用外部的�� > 容��去切，不�^�@�����}我是�X得怎�N�佣己谩� > > > ps. �@是我�y得�l�F到的比�^有��用性而且有不兼容的�������}，一般我�l�F的不 > 兼容��出�F的可能性都�U低的...... > > ps2. Cc+ �\江，因�槲野l�F�\江有出�F在 Lea 的文章�e :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/ > >
