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

偌桽珋婓腔寞隅ㄛ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 <kanghaol@oupeng.com>

> 扂��眭耋珨��褫眕琔�茧齟羋寔�����喜渡ㄩ俋窒腔ㄗclientHeight/clientWidthㄘ
> 睿��窒腔ㄗscrollHeight/scrollWidthㄘㄛ��窒腔喜渡掀廌湮﹝�@孬腔�瀞}岆ㄩ
>
>   珨��褫眕琔�衲羋婻炵� 'background-attachment: local' 掖劓腔
>   'background-position' 鷂'background-size' 孬腔啃煦掀硉腔�忄�麐�𣆂��糸漜�
>   喜渡��岆��窒喜渡儸ˋ
>
> ��艘䛐��偶瞰[1]﹝
>
>
>
> ㄗ眕狟樑偞 'background-repeat' 岆 'no-repeat'ㄛ秪鮋政測腔鋒�晫� 'repeat'
> 掖劓腔疑砉掀廌屾ˋ ㄘ
>
> 扂���劼J鮋 'background-attachment: local' 掖劓腔 'bckground-position' 孬
> 腔 % 腔�忄蒪傶艬@麐�𣆂��位���窒喜渡﹝樑⺼ % 腔�忄蒘ビ��位傯漜興葧蝤皇窐�
> 妏蚚 0‵100%ㄗ淏都ロ暿ㄘㄛ饒憩𩂰��傖掖劓硐堤政婓帤琔�茧�媆緊夔艘善腔闡珨
> �Kㄛ琔綎賸饒珨�K眳摽憩俇�姪散遛斯蔣鳥偭芊�珩憩岆ㄛ珩祥夔蚚
> '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 岆眈�位���窒喜
> 渡�忄蒫耀施E9 睿 Opera 12 飲祥岆ㄛ垀眕�@��撮ネ醴ゴ珩硐衄婓 WebKit 奻夔
> 蚚ㄛ婓 IE9 睿 Opera 12 狟憩呾琔善郔菁窒ㄛ菁窒腔�𦳃唯�岆祥𩂰掩屳裁﹝ㄗ珩
> 憩岆埻恅釬氪跦掛𢬿䛐 IE9 睿 Opera 12...ㄘ
>
>
>
> 筍岆 'background-size' % 腔�忄虡𣆂��位傭���喜渡扂憩𢬿饒𢏐復隅﹝醴ゴ�洂�
> 奻珩岆 WebKit 蚚��窒ㄛ［坻宐罜け蚚俋窒腔ロ倛﹝扂紒腕 'background-size'
> 褫眕眈�位�*俋醱喜渡*�忄蒫�����燴蚕ㄩ
>
> 1. 湮苤��隅
>
> 珨啜�縸f俋窒喜渡憩岆嘐隅腔ㄛ��窒喜渡蕦孬醱��⺍樓嗣褫夔𩂰樓湮ㄛ祥疑諷秶﹝
> ⺼彆 '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' 腔ㄛ饒珨�K腔�𣺿�腔剒猁岆*��窒喜渡*腔腔�侢炬銀閩��伂譟誕繲樓�琔嵞
> 腔媆緊ㄛ𩂰婓琔善議虳華源腔媆緊�𦳃�𢬿掩屳裁﹝垀眕褫眕挲 Lea 腔瞰赽緻
> ☆'background-position/size' 飲眈����窒喜渡�忄耤境酴情�
>
> 祥綎�瑖f隙�瞨狡豖蒘ゥ�'background-position' 眈����窒喜渡��
> 呾ㄛ'background-size' 眈�糸漜興葧觬忄耤ㄐ僱鹹�鮋ㄛ硐猁參 Lea 腔瞰赽蜊傖
>
>   background-size: 1px 40px, 1px 40px
>   backgorund-repeat: repeat-x, repeat-x
>
> 憩疑賸ㄛ秪鮋價掛奻☆屳蛂�𦳃做觸蕙搳僚��篿邳銘ブ��K朓翍阨ⅸ嵞笭恚腔𪊓𦵴奧
> 眒﹜﹜﹜
>
> ㄗ�汐芄盼@孬�𨯚㯴騫� 'background-attachment: local' 腔蕼偞俴鮋ㄛ珂祥奪褫
> 眕樓陔腔惤楊婦漪垀衄ロ暿腔褫夔俶﹜﹜﹜ㄘ
>
>
>
> 醴ゴ腔�䌫朌饡導�𢬿妦𢏐�Ⅶ��r硉ㄗ瘁�t麐�曎芠�𩂰衄俴鮋船�@𢏐嗣腔�伢N�洂鷙芄屆�
>
>
> 鍚俋珨��掀廌苤腔�瀞}ㄩ秪鮋 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 Thursday, 1 November 2012 03:33:18 UTC