Webkit background size: background-size — CSS | MDN
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
background-size — CSS | MDN
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅Β background-size
Β Π²Β CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΎ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅, ΡΠ°ΡΡΡΠ½ΡΡΠΎ, ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Π½ΠΎ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΡΒ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎΒ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°.
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ Π² ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ background
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΡΠ»Π΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° background-size
, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π°ΡΠ΅ΠΌ ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΡΡΡ Π΄ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ c ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
background-size: cover;
background-size: contain;
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
background-size: inherit;
background-size: initial;
background-size: unset;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
<ΡΠ°Π·ΠΌΠ΅Ρ>
- ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅Β
Β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ.<length>
<ΠΏΡΠΎΡΠ΅Π½ΡΡ>
- ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ<percentage>
background-origin
. ΠΠ±Π»Π°ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠΎΠ»Ρ ΠΈ Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΡ; ΠΎΠ±Π»Π°ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π° Π½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠ»ΠΈ ΠΎΠ±Π»Π°ΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ, ΠΎΡΡΡΡΠΏΡ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΡΠ»ΠΈattachment
ΡΠΎΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡfixed
, ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠ΅ΠΉ ΠΎΠ±Π»Π°ΡΡΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ, ΠΏΠΎΠΊΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΡ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. auto
- ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ, ΡΠΎΡ ΡΠ°Π½ΡΡ Π΅Π³ΠΎ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ.
contain
- ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π½Π°ΠΊΡΡΠ»Π° ΡΠΎΠ±ΠΎΠΉ Π²Π΅ΡΡ Π±Π»ΠΎΠΊ. ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π° Π²ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² Π±Π»ΠΎΠΊ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ.
cover
- ΠΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ΅
contain
. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ cΒ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌΒ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΏΠ»ΡΡΠ΅Π½Π½ΡΠΌ).Β ΠΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π»ΠΈΠ±ΠΎ Π²Π»Π΅Π²ΠΎ / Π²ΠΏΡΠ°Π²ΠΎ, Π»ΠΈΠ±ΠΎ ΡΠ²Π΅ΡΡ Ρ / ΡΠ½ΠΈΠ·Ρ.
ΠΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°) ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ (ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ).Β Π Π°ΡΡΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ. ΠΠ΅ΠΊΡΠΎΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ±Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° (ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ).Β ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΠΈ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ.Β ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±Π΅Π· Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ»ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ.
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ Π² Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). ΠΠΎ ΡΡΠΎΠ³ΠΎ, Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π»ΠΈΡΡ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±Π΅Π· Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠ΅ΠΉ, ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈΒ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°.
Π€ΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ -moz-element
(en-US) (ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ) Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ±Π»Π°ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°, Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ SVG, Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠ΅ΠΉ.
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΡΠΎ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ΅ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ ΠΆΠ΅ ΠΊΠ°ΠΊ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΎ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ .
ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΡΠ΅ΠΌ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ:
- ΠΡΠ»ΠΈ ΠΎΠ±Π° Π°ΡΡΠΈΠ±ΡΡΠ° Π²Β
background-size
Β Π·Π°Π΄Π°Π½Ρ ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½Ρ ΠΎΡΒauto
: - Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅.
- ΠΡΠ»ΠΈΒ
background-size
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΒcontain
Β ΠΈΠ»ΠΈΒcover
: - ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΏΡΠΈ Π½Π°ΠΈΠ±ΠΎΠ»ΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΠ½Π° ΠΈΠ»ΠΈ ΠΏΠΎΠΊΡΡΠ²Π°Π΅Ρ Π΅Ρ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°.
- ΠΡΠ»ΠΈΒ
background-size
Β ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΠΊΠ°ΠΊΒauto
Β ΠΈΠ»ΠΈΒauto auto
: - ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ±Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°ΠΊΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ.Β ΠΡΠ»ΠΈ ΠΎΠ½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°. ΠΡΠ»ΠΈ ΠΎΠ½ΠΎ Π½Π΅Β ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ Π±ΡΠ» Π±ΡΠ» Π±Ρ ΡΠΊΠ°Π·Π°Π½Β
contain
.Β ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄ΠΈΠ½ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΌ ΡΡΠΈΠΌ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠ΅ΠΉ.Β ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄ΠΈΠ½ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, Π½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°. - ΠΡΠ»ΠΈ background-size ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠ΄ΠΈΠ½ Π°ΡΡΠΈΠ±ΡΡΒ
auto
ΠΈ ΠΎΠ΄ΠΈΠ½ Π½Π΅-auto
: - ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ, ΡΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΈ Π²ΡΡΠΈΡΠ»ΠΈΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ· ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.Β ΠΠ»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π΅ΡΡΡ.Β ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π° Π΄Π»Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΡΡΡΡΡΠ²ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, Π΅ΡΡ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΡΠ΄ΡΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ, ΠΏΠΎΠ»Π°Π³Π°ΡΡΡ Π½Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ Π²ΡΡΠ΅, ΠΈ ΡΠ΅ΡΡΠΈΡΡΠΉΡΠ΅ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ (Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ Π²Π΅ΡΡΠΈΠΈ Firefox 7 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΈ Firefox 8 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ·Π΄Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠΈ), ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΡ.
Π€ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΠΈ ΡΠΊΠ°Π·Π°Π»ΠΈ background-size
, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ, Π»ΡΡΡΠ΅ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠΎΡΡΠ°Π²Π½ΡΡ ΡΠ°ΡΡΡ, ΠΈΠ»ΠΈ Π·Π°Π΄Π°ΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ (Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°, background-size: 50%
).Β Π Π΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² Π² ΡΠ°ΠΊΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ Π² Firefox 8, ΠΈ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΒ CSS3 ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ background-size
ΠΈ ΡΒ CSS3 ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
.bar {
width: 50px; height: 100px;
background-image: gradient(...);
background-size: 25px;
background-size: 50%;
background-size: auto 50px;
background-size: auto 50%;
background-size: 25px 50px;
background-size: 50% 50%;
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
ΠΈΒ ΡΠ°Π·ΠΌΠ΅ΡΒ auto
Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π² Π²Π΅ΡΡΠΈΡΡ
Β Firefox Π΄ΠΎ 8 ΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡΠΈΡ
ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Firefox 8, Π±Π΅Π· Π·Π½Π°Π½ΠΈΡ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ½ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ.
BCD tables only load in the browser
background-size | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.5+ | 3.0+ | 3.6+ | 2.1+ | 1.0+ |
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ΅ΡΡΠΈΠΈ CSS
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
background-size: [ <Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅> | <ΠΏΡΠΎΡΠ΅Π½ΡΡ> | auto ]{1,2} | cover | contain
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- <Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>
- ΠΠ°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π² Π»ΡΠ±ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π΄Π»Ρ CSS Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ Β β ΠΏΠΈΠΊΡΠ΅Π»Ρ (px), ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ (cm), em ΠΈ Π΄Ρ.
- <ΠΏΡΠΎΡΠ΅Π½ΡΡ>
- ΠΠ°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- auto
- ΠΡΠ»ΠΈ Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ (auto auto), ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ½Π° ΠΎΡΡΠ°ΡΡΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌΠΈ; Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (100px auto), ΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
- cover
- ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ°Π²Π½ΡΠ»Π°ΡΡ ΡΠΈΡΠΈΠ½Π΅ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΠ΅ Π±Π»ΠΎΠΊΠ°.
- contain
- ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ΅Π»ΠΈΠΊΠΎΠΌ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»Π°ΡΡ Π²Π½ΡΡΡΡ Π±Π»ΠΎΠΊΠ°.
ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ Π·Π°Π΄Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ½Π°, Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ Π·Π° auto. ΠΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΎΡ ΡΠ°Π½ΡΡΡΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π» Π·Π°Π΄Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Ρ
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size</title>
<style>
div {
height: 200px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */
border: 2px solid #000; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°ΠΌΠΊΠΈ */
background: url(images/mybg.png) 100% 100% no-repeat; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΠ½ */
background-size: cover; /* ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌ ΡΠΎΠ½ */
}
</style>
</head>
<body>
<div>...</div>
</body>
</html>
ΠΡΠ°ΡΠ·Π΅ΡΡ
Safari Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 4.1 ΠΈ Chrome Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 3.0 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ -webkit-background-size.
Opera Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 10.53 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ -o-background-size.
Firefox Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 4.0 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ -moz-background-size.
webkit-background-size — ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ css :: ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ cssdot.ru
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ -webkit-background-size
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π·Π°Π΄Π°Π½Ρ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
Π²Π΅Π»ΠΈΡΠΈΠ½Π°Ρ
(cm, mm, in ΠΈ Ρ.Π΄.), ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
(px, em ΠΈ Ρ.Π΄.), ΠΈΠ»ΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΠΈΡΠΈΠ½Π΅ ΠΈ Π²ΡΡΠΎΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ Ρ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΡΡ
ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ, ΡΠ°ΠΊ ΠΈ Π±Π΅Π· Π½ΠΈΡ
.
ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
length
{1,2}Β — Π·Π°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ Π²Π΅Π»ΠΈΡΠΈΠ½Π°Ρ (cm, mm, in ΠΈ Ρ.Π΄.) ΠΈΠ»ΠΈΒ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ (px, em ΠΈ Ρ.Π΄.).Β ΠΡΠ»ΠΈΒ Π·Π°Π΄Π°Π½ΠΎΒ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ Π²ΡΠΎΡΠΎΠ΅Β Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.percentage
{1,2}Β — Π·Π°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ/ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.Β ΠΡΠ»ΠΈ Π·Π°Π΄Π°Π½ΠΎΒ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ Π²ΡΠΎΡΠΎΠ΅ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.- auto{1,2} — Π·Π°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΒ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ ΡΠ°Π²Π½ΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌΡ, Π² ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½Ρ ΠΎΠ±Π΅ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ auto, ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ auto; Π° Π΅ΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (25%Β auto), ΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
- cover — ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡΒ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΠΏΠΎ ΠΌΠ΅Π½ΡΡΠ΅ΠΉ ΡΡΠΎΡΠΎΠ½Π΅, ΡΠΎ Π΅ΡΡΡΒ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ½ Ρ ΠΈΠ·Π±ΡΡΠΊΠΎΠΌ ΠΏΠΎΠΊΡΡΠ²Π°Π» Π±Π»ΠΎΠΊ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ.
- containΒ — ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΠΏΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΡΠΎΡΠΎΠ½Π΅, ΡΠΎ Π΅ΡΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±ΡΒ Π±Π»ΠΎΠΊ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΠΈΠ·Π±ΡΡΠΊΠΎΠΌ ΠΏΠΎΠΊΡΡΠ²Π°Π»Β ΡΠΎΠ½.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΡ
Chrome 1-3, Safari 3-4
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ -webkit-background-size
Π² Π΄Π²ΠΈΠΆΠΊΠ΅ WebKit ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π² ΡΠ°ΠΌΠΊΠ°Ρ
ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS3, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΡΡΡΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° contain ΠΈ cover, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π»ΠΎΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°Π½ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°, ΡΠΎ Π²ΡΠΎΡΠΎΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΡΡΠΈΡΠ°Π΅ΡΡΡ, Π½Π΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π° ΡΠ°Π²Π΅Π½ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ -webkit-background-size
ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΈ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ Π½Π° Π²ΡΠ΅Ρ
Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ Π½ΠΎΡΠΈΡΠ΅Π»ΡΡ
, Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π―Π²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π²ΠΈΠΆΠΊΠ° WebKit (Π±ΡΠ°ΡΠ·Π΅ΡΡ Chrome ΠΈ Safari), ΠΈ Π½Π΅ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
Π‘ΠΌΠΎΡΡΠΈ ΡΠ°ΠΊΠΆΠ΅:
- background-size — Π Π°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΌΠ°ΡΡΡΠ°Π± ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
- -o-background-size — Π Π°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΌΠ°ΡΡΡΠ°Π± ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
- -moz-background-size — Π Π°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΌΠ°ΡΡΡΠ°Π± ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π Π°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΌΠ°ΡΡΡΠ°Π± ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
[ <length> | <percentage> | auto ]{1,2} | cover | contain [, [ <length> | <percentage> | auto ]{1,2} | cover | contain]*
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ:
Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
ΠΠ°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅:
Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ
Π’ΠΈΠΏ Π½ΠΎΡΠΈΡΠ΅Π»Ρ:
Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° (DOM):
[ΡΠ»Π΅ΠΌΠ΅Π½Ρ].style[‘-webkit-background-size’]
ΠΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ
Internet Explorer
Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ
Firefox
Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ
Chrome
1.0 | 2.0 | 3.0 | 4.1 | 5.0 | 6.0 | 7.0 | 8.0 | 9.0 | 10.0 | 11.0 | 12.0 | 13.0 | 14.0 | 15.0 | 16.0 | 17.0 | 18.0 | 19.0 | 20.0 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
+/- | +/- | +/- | + | + | + | + | + | + | + | + | + | + | + | + | + | + | + | + | + |
Safari
1.0 | 1.1 | 1.2 | 1.3 | 2.0 | 3.0 | 3.2 | 4.0 | 5.0 |
---|---|---|---|---|---|---|---|---|
— | — | — | — | — | — | +/- | +/- | + |
Opera
Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-size | CSS ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ/-ΠΈΠΉ. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ background-origin.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
CSS ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
background-size:"auto | length | cover | contain | initial | inherit";
JavaScript ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
object.style.backgroundSize = "150px 150px"
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
auto | Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ²ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
length | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ, Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅Ρ Π²ΡΡΠΎΡΡ. ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ Π΄Π»Ρ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto. |
% | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ, Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅Ρ Π²ΡΡΠΎΡΡ. ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ Π΄Π»Ρ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto. |
cover | ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΊΡΡΡΡ ΠΈΠ· ΠΏΠΎΠ»Ρ Π·ΡΠ΅Π½ΠΈΡ. |
contain | ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΠΎΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΠ΅ΡΡΠΈΡ CSS
CSS3
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ
ΠΠ΅Ρ.
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅
ΠΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
<!DOCTYPE html> <html> <head> <title>ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS</title> <style> div { width : 8em; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ° */ height : 8em; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° */ border : 3px solid orange; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΏΠ»ΠΎΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 3px ΠΎΡΠ°Π½ΠΆΠ΅Π²ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° */ background : url(manul.jpg); /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ */ background-repeat : no-repeat; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ */ display : inline-block; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <div> ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠ΅ (Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ Π² Π»ΠΈΠ½Π΅ΠΉΠΊΡ) */ margin-right : 15px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ ΠΎΡΡΡΡΠΏΠ° ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ margin-bottom : 15px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ ΠΎΡΡΡΡΠΏΠ° ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ color : yellow; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° ΠΆΠ΅Π»ΡΡΠΉ */ } .test {background-size : auto;} /* ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ²ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) */ .test2 {background-size : 100px 100px;} /* Π·Π°Π΄Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */ .test3 {background-size : 70% 70%;} /* Π·Π°Π΄Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ .test4 {background-size : cover;} /* ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ) */ .test5 {background-size : contain;} /* ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΠΎΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ </style> </head> <body> <div class = "test">auto</div> <div class = "test2">100px 100px</div> <div class = "test3">70% 70%</div><br> <div class = "test4">cover</div> <div class = "test5">contain</div> </body> </html>
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS (ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size).CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° — CSS: ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS background-size
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ°Π²ΠΈΡΡ Π΄ΠΎ Π΅Π³ΠΎ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈΠ»ΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Ρ.
ΠΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, Π½Π΅ ΠΏΠΎΠΊΡΡΡΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π·Π°ΠΏΠΎΠ»Π½ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ background-color
, ΠΈ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π²ΠΈΠ΄Π΅Π½ Π·Π° ΡΠΎΠ½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΈΠΌΠ΅ΡΡΠΈΠΌΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ / ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ.
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 50%;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 3.2em;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 12 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π°Π²ΡΠΎ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 50% Π°Π²ΡΠΎ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 3em 25%;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π°Π²ΡΠΎ 6 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π°Π²ΡΠΎ Π°Π²ΡΠΎ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π°Π²ΡΠΎ, Π°Π²ΡΠΎ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 50%, 25%, 25%;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 6 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π°Π²ΡΠΎ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-size
Π·Π°Π΄Π°Π΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
ΡΠΏΠΎΡΠΎΠ±ΠΎΠ²:
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ
ΠΈΠ»ΠΈΠΏΠΎΠΊΡΡΡΠΈΡ
. - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ, Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΡΠΎΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
Π°Π²ΡΠΎ
. - ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ; Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ, Π° Π²ΡΠΎΡΠΎΠ΅ — Π²ΡΡΠΎΡΡ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ
<Π΄Π»ΠΈΠ½Π°>
,<ΠΏΡΠΎΡΠ΅Π½Ρ>
ΠΈΠ»ΠΈΠ°Π²ΡΠΎ
.
Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ Π·Π°ΠΏΡΡΠΎΠΉ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
-
ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ
- ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π±Π΅Π· ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ ΠΈΠ»ΠΈ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΠΌΠΎΠ·Π°ΠΈΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π°
background-repeat
Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅no-repeat
. -
ΠΊΡΡΡΠΊΠ°
- Π£Π²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ΠΎ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π»ΠΈΠ±ΠΎ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π»ΠΈΠ±ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΡΠΎΠ±Ρ Π½Π΅ ΠΎΡΡΠ°Π²Π°Π»ΠΎΡΡ ΠΏΡΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°.
-
Π°Π²ΡΠΎ
- ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ.
-
<Π΄Π»ΠΈΠ½Π°>
- Π Π°ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ.
-
<ΠΏΡΠΎΡΠ΅Π½Ρ>
- Π Π°ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ° ΠΎΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° . ΠΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ
background-origin
(ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ»Π΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ). ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΡΠΎΠ½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ background-attachment
ΡΠ°Π²Π½ΠΎfixed
, ΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ — ΡΡΠΎ Π²ΡΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ.
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ
ΠΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°) ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ (ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΊ Π²ΡΡΠΎΡΠ΅). ΠΡΠΈ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅:
- Π Π°ΡΡΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, JPG) Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ.
- ΠΠ΅ΠΊΡΠΎΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, SVG) Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΡΠ»ΠΈ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ°ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅, ΡΠ°ΠΊ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ.ΠΡΠ»ΠΈ Ρ Π½Π΅Π³ΠΎ Π½Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ.
- CSS
<Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ>
s Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ»ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ. - Π€ΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ
element ()
, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π Gecko ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ element ()
, Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°, Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ SVG, Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠ΅ΠΉ.ΠΡΠΎ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
ΠΠ° ΠΎΡΠ½ΠΎΠ²Π΅ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½Ρ ΠΎΠ±Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°
background-size
, Π° Π½Π΅auto
: - Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ.
- ΠΡΠ»ΠΈ
background-size
— ΡΡΠΎ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ
ΠΈΠ»ΠΈΠΎΠ±Π»ΠΎΠΆΠΊΡ
: - ΠΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌΡΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° ΠΈΠ»ΠΈ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡΠ΅ΠΉ Π΅Π΅.ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
- ΠΡΠ»ΠΈ
background-size
—auto
ΠΈΠ»ΠΈauto auto
: - ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ°ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅, ΡΠ°ΠΊ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ.
- ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
- ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ
, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅
. - ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΡΡΠΎΠΌΡ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΡΡΠ³ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ.
- ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
- ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ SVG ΠΈΠΌΠ΅ΡΡ Π°ΡΡΠΈΠ±ΡΡ
preserveAspectRatio
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ΅Π½, ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ
; ΡΠ²Π½ΡΠΉbackground-size
Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡpreserveAspectRatio
. - ΠΡΠ»ΠΈ
background-size
ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρauto
ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π½Π΅auto
: - ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, ΠΎΠ½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ.
- ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ, ΠΎΠ½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΠΎΠΉ ΠΈΠΌΠ΅Π΅ΡΡΡ.ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π΅Ρ, ΠΎΠ½ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π° Π΄Π»Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Ρ ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΡΡΡΡΡΠ²ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, Π΅ΡΠ΅ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΡΠ΄ΡΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ, ΠΏΠΎΠ»Π°Π³Π°ΡΡΡ Π½Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ Π²ΡΡΠ΅, ΠΈ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΡ.
Π Π°Π±ΠΎΡΠ° Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ <Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ>
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΠΈ Π·Π°Π΄Π°Π΅ΡΠ΅ background-size
, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ, Π»ΡΡΡΠ΅ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ auto
ΠΈΠ»ΠΈ Π·Π°Π΄Π°Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, background-size: 50%
).Π Π΅Π½Π΄Π΅ΡΠΈΠ½Π³ <Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ>
Ρ Π² ΡΠ°ΠΊΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ Π² Firefox 8 ΠΈ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ ΠΌΠ΅ΠΆΠ΄Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π²ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π² ΠΏΠΎΠ»Π½ΠΎΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ CSS3 background-size
ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ CSS3 Image Values. Π’Π΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ.
.gradient-example {
ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ (ΡΠΈΠ½ΠΈΠΉ, ΠΊΡΠ°ΡΠ½ΡΠΉ);
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 25 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 50%;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π°Π²ΡΠΎ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π°Π²ΡΠΎ 50%;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 25 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 50% 50%;
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
ΠΈ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ auto
Ρ <Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ>
, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΠΏΠ»ΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π² Π²Π΅ΡΡΠΈΡΡ
Firefox Π΄ΠΎ 8 ΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡΠΈΡ
ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Firefox 8, Π±Π΅Π· Π·Π½Π°Ρ ΡΠΎΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ½ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ.
ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ | Π°Π²ΡΠΎ Π°Π²ΡΠΎ |
---|---|
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ | . ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ :: ΠΏΠ΅ΡΠ²Π°Ρ Π±ΡΠΊΠ²Π° ΠΈ :: ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠΎΠΊΠ° . |
Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ | Π½Π΅Ρ |
ΠΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ | ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° |
ΠΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ | , ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ, Π½ΠΎ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π΄Π»ΠΈΠ½ΠΎΠΉ, ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½Π½ΠΎΠΉ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ Π΄Π»ΠΈΠ½Ρ |
ΠΠΎΠ·Π°ΠΈΠΊΠ° Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° Firefox ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 2982×2808.ΠΡ Ρ
ΠΎΡΠΈΠΌ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ ΡΠ΅ΡΡΡΠ΅ ΠΊΠΎΠΏΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 300×300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ background-size
, ΡΠ°Π²Π½ΠΎΠ΅ 150 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ.
HTML
CSS
.tiledBackground {
background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ 2px;
ΡΠ²Π΅Ρ: ΡΠΎΠ·ΠΎΠ²ΡΠΉ;
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠΌ. Π ΡΠ°Π·Π΄Π΅Π»Π΅ Β«ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉΒ».
Π’Π°Π±Π»ΠΈΡΡ BCD Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
css — background-size: cover Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° iOS
ΠΠΎΡΠ°Π±ΠΎΡΠΊΠ° ΠΎΡΠ²Π΅ΡΠ° Π Π°ΠΉΠ°Π½Π° Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ·Π»Π° html
ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² @media
, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ css .
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΎΠ±Π»ΠΎΠΆΠΊΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ½
Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π²ΠΊΠ»ΡΡΠ°Ρ iOS, Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ·Π»Π°, ΡΠΎΠ³Π΄Π° ΡΡΡΠΊ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° ΡΠ°ΠΌΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ (ΡΠ΅Π»Π΅) , Π° Π½Π΅ Π½Π° ΡΠΎΠ½Π΅ , ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ½ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ ΠΏΠΎΡΡΡΡ iOS.
ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ ΡΠ°ΡΠΌ ΠΈ Π½Π° iOS: https://www.doklist.com/
ΠΡΠΎΡ ΠΊΠΎΠ΄ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ iOS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π²ΡΡΠΎΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
, Π° Π½Π΅ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
:
ΠΊΡΠ·ΠΎΠ² {
ΡΠΎΠ½: URL-Π°Π΄ΡΠ΅Ρ (https://www.w3schools.com/css/trolltunga.jpg) ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ ΡΠ΅Π½ΡΡ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°;
-webkit-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-moz-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-o-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
}
Π’Π΅ΠΏΠ΅ΡΡ ΡΡΠΎ ΠΌΠ°Π³ΠΈΡ, ΡΠ΅Π»ΠΎ : ΠΏΠΎΡΠ»Π΅
ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ, Π° Π½Π΅ ΡΠΎΠ½ :
ΡΠ΅Π»ΠΎ: ΠΏΠΎΡΠ»Π΅ {
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅:"";
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅; / * ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½ * /
Π²Π΅ΡΡ
: 0;
Π²ΡΡΠΎΡΠ°: 100Π²Ρ
; / * ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ Π°Π΄ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° * /
ΡΠ»Π΅Π²Π°: 0;
ΡΠΏΡΠ°Π²Π°: 0;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: -1; / * Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡΠ°Π²ΠΈΡΡ Π² ΡΠΎΠ½ΠΎΠ²ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ * /
ΡΠΎΠ½: url (https: // www.w3schools.com/css/trolltunga.jpg) center center;
-webkit-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-moz-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-o-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
}
Π― ΠΌΠΎΠ³ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΌ body Ρ «position: fixed; overflow-y: scroll», Π½ΠΎ Ρ Π½Π΅ Ρ ΠΎΡΠ΅Π» ΡΠ²ΡΠ·ΡΠ²Π°ΡΡΡΡ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π»Π° ΠΈ ΠΌΠΎΠΈΠΌ ΠΎΠ±ΡΠΈΠΌ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ.
Π’Π°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ Π½Π° ΡΠ΅Π»Π΅ : ΠΏΠΎΡΠ»Π΅ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ. Π― ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π» ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° Mac ΠΈ iOS Ρ ΠΏΠΎΠΌΠΎΡΡΡ firefox, safari, chrome.
Π― ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π» ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ github Ρ Π΄Π²ΡΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ: https://github.com/thesved/fixed-cover-background
CSS ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°
ΠΡΠΎ ΡΠΎ, ΡΡΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅Ρ Π»ΡΠ΄Π΅ΠΉ ΠΆΠΈΡΡ Π² ΡΡΡΠ°Ρ Π΅, ΠΈ Π² ΡΠ΅ΠΌ ΠΎΠ½ΠΈ ΡΠ°ΡΡΠΎ Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½Ρ. ΠΠ± ΡΡΠΎΠΌ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π³ΠΎΠ²ΠΎΡΡΡ, Π½ΠΎ Π»ΡΠ±ΠΎΠΏΡΡΡΡΠ²ΠΎ Π²ΡΠ΅Π³Π΄Π° ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ. ΠΠ΅Π²ΡΡΡ ΠΈΠ· Π΄Π΅ΡΡΡΠΈ ΠΆΠ΅Π½ΡΠΈΠ½ ΡΠΎΠ³Π»Π°ΡΠ°ΡΡΡΡ ΡΡΠ²Π΅ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ. Π Π΅ΠΊΠ»Π°ΠΌΠΎΠ΄Π°ΡΠ΅Π»ΠΈ Π΄Π΅Π»Π°ΡΡ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅, ΡΡΠΎΠ±Ρ ΠΌΡ ΡΡΠ²ΡΡΠ²ΠΎΠ²Π°Π»ΠΈ ΡΠ΅Π±Ρ Π½Π΅Π°Π΄Π΅ΠΊΠ²Π°ΡΠ½ΡΠΌΠΈ, Π½ΠΎ Π³ΠΎΠ²ΠΎΡΡΡ Π½Π°ΠΌ, ΡΡΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ»ΡΡΡΠΈΡΡ. ΠΠ°, Π³ΠΎΡΠΏΠΎΠ΄Π° … ΠΏΠΎΡ ΠΎΠΆΠ΅, ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°
, ΡΠΎ Π΅ΡΡΡ. CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ MooTools ΠΡΠΈΡΡΠΎΡ ΠΠΎΠΉΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΡΠ΅Ρ
Π½ΠΈΠΊΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠΎΠ½Π°
, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ΅ΠΌΡ Π΅Π³ΠΎ ΡΠ°ΠΏΠΊΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Β«ΠΏΠΎΠ»Π½ΠΎΠΉΒ» Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π΄Π°ΠΆΠ΅ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠΈΡΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size
.
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°
CSS
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-size
ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, Π° Π·Π°ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠΈΡΠ»ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ: ΠΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ.
- cover: ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄ΠΎΡΡΠΈΠ³ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ / Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- Π΄Π»ΠΈΠ½Π° / ΠΏΡΠΎΡΠ΅Π½Ρ: ΠΡΠ±ΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠΉ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
Π₯ΠΎΡΠΈΡΠ΅ Π²Π΅ΡΡΡΠ΅, Ρ
ΠΎΡΠΈΡΠ΅ Π½Π΅Ρ, Π½ΠΎ ΡΠ°ΠΌΠΎΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ — ΡΡΠΎ Π·Π°Π΄Π°Π½ΠΈΠ΅ Π΄Π»ΠΈΠ½Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ background-size
:
/ * Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² * / #header { / * ΡΠ°Π·ΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°! * / Π²ΡΡΠΎΡΠ°: 350 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; / * Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ½Π° * / ΡΠΎΠ½-ΠΏΠΎΠ²ΡΠΎΡ: Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ; background-position: center center; / * Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½ΠΈ Π΄Π»Ρ Π·Π°Π±Π°Π²Ρ * / box-shadow: rgba (0,0,0,0.20) 0 10px 10px; } /* ΠΏΠΎΠΊΡΡΡΠΈΠ΅ */ # header.flex { /* ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ */ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°; } /* ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ */ # header.flex { /* ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ */ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ; } / * Π³ΠΈΠ±ΠΊΠΎΡΡΡ, Π²Π΅ΡΠ΅Π»ΡΠ΅ * / # header.flex { /* ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ */ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 100% Π°Π²ΡΠΎ; }
ΠΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅
Christoph ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Ρ ΠΎΡΠΎΡΠΎ Π²ΠΈΠ΄Π΅ΡΡ ΡΠ°Π½Π°ΡΠΎΠ² JavaScript Π²ΠΎ Π²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΌΠΎΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ
Π’ΠΎΠ½ΠΊΠΎΠ΅ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠΈΠ΅, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ background-size
, Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ.ΠΠ±ΡΡΠ½ΠΎ Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΊΠ΅ΠΏΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠ½ΠΎΡΡΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠΊΠ½Π° ΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π½ΠΎ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠΌΠΎΠ³ ΠΌΠ½Π΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π½Π½ΠΎΡΡΡ ΠΈ ΠΏΡΠΎΡΡΠΎΡΡ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΊΠ»ΠΈΠ΅Π½ΡΠ°. background-size
ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Firefox, Safari, Chrome, Opera ΠΈ IE9 +.
Π§ΡΠΎ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅ ΠΎΠ± ΡΡΠΎΠΉ ΡΠ΅Ρ Π½ΠΈΠΊΠ΅ — ΠΈΠ·ΡΡΠ½ΡΠΉ ΡΡΡΠΊ ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ? ΠΡ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΡΠΎ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π»ΠΈΡΠ½ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅? ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ Π±ΠΈΠ·Π½Π΅Ρ-ΡΠ°ΠΉΡΠ°?
Π€ΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π² ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅, Π±ΡΠ»ΠΈ ΡΠ΄Π΅Π»Π°Π½Ρ Π² ΠΠΎΠ½Π΄ΠΎΠ½Π΅ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Ρ Π°ΠΊΠ°ΡΠΎΠ½Π° MooTools.
ΠΠ°Π³ΡΡΠ·ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°
TL; DR
: Π΅ΡΠ»ΠΈ Π²ΡΠ΅, ΡΡΠΎ Π²Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ, — ΡΡΠΎ ΠΊΠΎΠ΄ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΠΎΠΉ ΡΠ°Π±ΠΎΡΡ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΡΡΠΎΡ ΡΠ°Π·Π΄Π΅Π» ΠΈ Π²ΠΎΠ·ΡΠΌΠΈΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π°.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΡΠΎΠ½ ΠΠΈΡΠΏΠ»Π΅ΠΉ Π½Π΅ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π€ΠΎΠ½ ΠΠ°Π³ΡΡΠ·ΠΊΠ°
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ½Π° ‘background-size’ Π½Π° ‘cover’ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠΊΡΡΠ²Π°Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ½Π° Π½Π° ΡΠΊΡΠ°Π½Π΅ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.ΠΠΎ ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°, ΡΡΠΎΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Π²Π»ΠΈΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° Π½Π΅ Π½Π° Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Ρ Π²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 1400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΠΎΠ΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠΊΡΠ°Π½ Google Nexus 4.
html {
ΡΠΎΠ½: url ('large_bg.jpg') ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-webkit-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-o-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-moz-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
}
ΠΠ°Π³ΡΡΠ·ΠΊΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°, Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ.
@media screen ΠΈ (max-width: 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) {
html {
ΡΠΎΠ½: url ('small_bg.jpg') ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½;
}
}
@media screen ΠΈ (min-width: 481px) ΠΈ (max-width: 900px) {
html {
ΡΠΎΠ½: url ('med_bg.jpg') ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½;
}
}
@media screen ΠΈ (min-width: 901px) {
html {
ΡΠΎΠ½: url ('large_bg.jpg ') ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½;
}
}
html {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-webkit-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-o-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
-moz-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
}
ΠΠ°ΠΏΡΠ΅ΡΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΠΎΠ½Π° ΡΠΊΡΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΡΡΡ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΡΠΊΡΠ°Π½Π΅, Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ, ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ ΡΠΎΠ½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Β«noneΒ» Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°.
@media screen ΠΈ (max-width: 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) {
html {
ΡΠΎΠ½: Π½Π΅Ρ;
}
}
ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Ρ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ ΡΠΊΡΡΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π·Π°Π³ΡΡΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠ΅ΡΠ΅Π· ΡΠ΅Π³
), ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΡΡΠΈΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ.
ΠΠ± Π°Π²ΡΠΎΡΠ΅
ΠΡΠ½ΠΈΡ Π‘Π΅ΡΡ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΊΡΡΠΏΠ½ΡΠΌΠΈ ΡΠ°ΠΉΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈ ΠΈ B2C Π½Π°Π΄ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΠΈ ΠΈΡ ΡΠ°ΠΉΡΠΎΠ². ΠΠ½ ΡΠ°ΡΡΠΎ ΠΏΠΈΡΠ΅Ρ Π·Π΄Π΅ΡΡ Π² Π’Π²ΠΈΡΡΠ΅ΡΠ΅.
Π£Π²Π΅Π»ΠΈΡΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°! — ΠΠΏΠ°ΡΡΠ°ΠΌΠ΅Π½ΡΡ A List Apart
Π ΠΌΠΈΡΠ΅ ΡΠ΅ΠΊΠ»Π°ΠΌΡ, ΡΡΡΠ΅ΠΌΡΡΠ΅ΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π΄ΡΠΉΠΌ ΡΡΠ΅Π΄Ρ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ Π±ΡΠ΅Π½Π΄Π° ΠΈΠ»ΠΈ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°, ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS, ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΡΡΠΈΡΡ.ΠΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠΈ ΠΊΠΎΠ΄Π° (ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΡΡΠΎΠΊ ΠΎΡΠΌΠ΅ΡΠ΅Π½ Β» β Π Π΅Π΄. ):
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ°ΡΡΠΈ Π½ΠΈΠΆΠ΅
body {
ΡΠΎΠ½: # 000 url (myBackground_1280x960.jpg) Β»
ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°;
}
Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 1280 Π½Π° 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π° ΠΎΠ±Π»Π°ΡΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (ΠΎΠ½ΠΎ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ).
ΠΠΎ ΠΊΠ°ΠΊΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΈΠΌ? ΠΠΎΠ½ΠΈΡΠΎΡΡ ΠΈ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ Π±ΡΡΡΡΠΎ ΡΠ°Π·Π²ΠΈΠ²Π°Π»ΠΈΡΡ, ΠΈ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ ΡΠΈΡΠΎΠΊΠΈΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠΊΡΠ°Π½Π°.Π‘Π°ΠΌΡΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ — 1024×768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, 1280×800 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, 1280×1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ 1440×900 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ΄Π½Π°ΠΊΠΎ Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½ΠΎΠ² Π²ΡΡΠΎΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΎΡΡΠΈ (1920×1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ Π΄ΠΈΡΠΏΠ»Π΅Π΅Π², ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎ 2560×1600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅.
Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. ΠΠ½ΠΎΠ³ΠΈΠ΅ Π»ΡΠ΄ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ Π΄ΠΎΠ»Ρ ΡΠΊΡΠ°Π½Π°, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΡΠ΄ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ 800×600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π ΡΡΠΎ ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΊΠ°ΡΠΌΠ°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠ°ΠΌΠΈ.
ΠΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π° Π»ΡΡΡΠΈΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π±ΡΠ»ΠΎ Π±Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΎ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΠΎΠΊΠ½Π°. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π² CSS 2.1 Π½Π΅Ρ ΡΡΠ΅Π΄ΡΡΠ² ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Ρ
ΠΎΠ΄Π½ΡΡ
ΠΏΡΡΠ΅ΠΉ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML img
(Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ½Π° CSS). ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ»ΠΎΠ΅Π² ΠΈ ΡΠ°Π±Π»ΠΈΡ ΠΈΠ»ΠΈ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π², ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π΅ Π²ΡΠ΅ ΡΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΎΡ
ΡΠ°Π½ΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ Π½Π΅ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΠΎΠΌΡ ΡΠΎΠ½Ρ.
CSS3 ΡΠΎΠ½Ρ ΡΠΏΠ΅ΡΠ°Ρ Π½Π° ΠΏΠΎΠΌΠΎΡΡ # section2
Π£ΡΠΎΠ²Π΅Π½Ρ 3 ΠΌΠΎΠ΄ΡΠ»Ρ W3C CSS Background and Borders Module (Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ — ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ) ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π½Π°ΡΠΈΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ. ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (Π΅ΡΠ»ΠΈ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ W3C):
.
ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΡ
ΡΠ°Π½ΡΡ Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ (Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π΅ΡΡΡ), Π΄ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΈ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π°, ΠΈ Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ° ΠΌΠΎΠ³Π»ΠΈ ΡΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
cover
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΡ
ΡΠ°Π½ΡΡ Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ (Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π΅ΡΡΡ), Π΄ΠΎ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΈ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π°, ΠΈ Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ° ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΡ
Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
Π²Π°ΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΎΡΡΠ°Π²Π»ΡΡ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ Π»ΠΈΠ±ΠΎ Π½Π° ΡΠ²Π΅ΡΡ
Ρ-ΡΠ½ΠΈΠ·Ρ
, Π»ΠΈΠ±ΠΎ Π½Π° ΡΠ»Π΅Π²Π°-ΡΠΏΡΠ°Π²Π°
, Π΅ΡΠ»ΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ. ΠΠΎ Π²ΡΠΎΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΈΡΠΈΠ»ΠΈ ΠΊΠΎΠ΄ ΠΈΠ· ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-size
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅
.
ΠΠ±Π»ΠΎΠΆΠΊΠ°
Π²ΡΠ΅Π³Π΄Π° Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΎΡΡΠ΅Π·Π°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ Π²ΠΎΠ»ΠΎΡΡ ΠΈΠ»ΠΈ ΡΡΠΈ, ΡΡΠΎ Ρ Π»ΠΈΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Ρ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π².ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-position
. Π ΡΡΠ΅ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ½ΠΎΠ²Π° ΡΠ°ΡΡΠΈΡΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΡΡΠΎΡ ΡΠ°Π· ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-size
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ cover
.
Π§ΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½Π°, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π² ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ:
body {
ΡΠΎΠ½: # 000 url (myBackground_1280x960.jpg) Β»
ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°;
-moz-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-size
ΡΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Firefox 3.6 (Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ -moz
; Firefox 4 Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS3), Chrome 5, Safari 5 ΠΈ Opera 10.54; ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ Π² Internet Explorer 9 (ΠΎΠ½ ΡΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π² Preview 3). Π‘ΡΠ°ΡΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Webkit ΠΈ Opera ΡΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size
, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π» ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅
, ΠΈ , ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΠΈΠ΅
.
ΠΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½ΠΎΠΉ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ½Π° Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ.ΠΡΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π΄ΠΎ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ, ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π΄ΠΎ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎ ΡΠ°ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS3 Π² ΠΌΠΈΠΊΡ # section3
ΠΠΎΠ΄ΡΠ»Ρ W3C CSS3 Media Queries (ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ) ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠ»ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½Π° Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Firefox 3.5, Chrome, Safari 3 ΠΈ Opera 7, Π° ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ Π² Internet Explorer 9.
ΠΠΎΠ±Π°Π²Π»ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΡΠΈΠ»Ρ, ΠΌΡ ΡΠΎΠΎΠ±ΡΠ°Π΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ Π½Π΅ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π»ΠΎΡΡ ΠΌΠ΅Π½ΡΡΠ΅ 1024 Γ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
body {
ΡΠΎΠ½: # 000 url (myBackground_1280x960.jpg) Β»
ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°;
-moz-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
} @media only all and (max-width: 1024px) ΠΈ (max-height: 768px) {
ΡΠ΅Π»ΠΎ {
-moz-background-size: 1024px 768px;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 1024px 768px;
}
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ 1024×768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (1280×960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Π²Π½Π΅Π·Π°ΠΏΠ½ΡΠ΅ ΡΠΊΠ°ΡΠΊΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π Π½Π°ΡΠΈΡ
ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ
ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
, ΡΠ΅ΡΠ²Π΅ΡΡΠΎΠΌ ΠΈ ΠΏΡΡΠΎΠΌ, ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @media
, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π»ΠΎΡΡ ΠΌΠ΅Π½ΡΡΠ΅ 1024 Π½Π° 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΈΠΌΠ΅Ρ 5 ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-position
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ left-bottom
Π²ΠΌΠ΅ΡΡΠΎ center-center
, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊ ΡΡΠ°ΡΡΠΌ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌ # section4
ΠΡΠΎ Π·Π°Ρ Π²Π°ΡΡΠ²Π°ΡΡΠΈΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½Π° Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΠ³Π΄Π° Π²ΡΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΡΠ΅ΡΠ΄Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅ΠΌ Π½ΠΎΠ²ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ HTML5 ΠΈ CSS3. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠ΅ΡΠ΅ΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠ°ΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·ΡΠΌΠ½ΡΠΌΠΈ ΠΈ ΡΠΈΡΡΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ. Π₯ΠΎΡΡ ΡΠΈΠΊΠ»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Firefox, Chrome, Safari ΠΈ Opera ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅, Π±ΡΠ΄Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ Π±ΡΡΡΡΠΎ Π»ΡΠ΄ΠΈ ΠΎΡ Π²Π°ΡΡΡ Internet Explorer 9, ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΡΡΠΈΡ Π½ΠΎΠ²ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π² Π±ΠΎΠ»ΡΡΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±Π°Ρ .
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π°Π³Π° — Weglot
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Weglot ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π» Π²ΡΠ΅ ΡΠ»Π°Π³ΠΈ Π² ΡΠ°ΠΉΠ»Π΅ (CSS Sprite) Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π°Π³Π° Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΠΏΡΠΎΡΡΠΎ.
1-ΠΉ ΡΠ°Π³: Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡΠ° ΠΊΠΎΠ΄Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΡ ΡΠ»Π°Π³ΠΎΠ². ΠΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π²Π°ΡΠΈΡ ΡΠ»Π°Π³ΠΎΠ². Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ (Π½Π°ΡΡΡΠΎΠΉΠΊΠ°: ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ ΡΠ»Π°Π³ΠΈ) Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS:
.weglot-flags.flag-3 a :: before,
.weglot-flags.flag-3 span :: before {
background-image: url ("../ images / round_flag.png");
width: 24px! Important;
height: 24px! Important;
-webkit-background-size: Π°Π²ΡΠΎ 24px! ΠΠ°ΠΆΠ½ΠΎ;
background-size: auto 24px! Important;
}
ΠΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ width
, height
ΠΈ background-size
ΡΠ²ΠΎΠΉΡΡΠ² Ρ ΡΡΠ΅Π±ΡΠ΅ΠΌΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ.
2-ΠΉ ΡΠ°Π³: ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π°Π³Π° Π½Π°ΠΉΠ΄ΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-position
ΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΠ΅ Π΅Π³ΠΎ.Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-position
:
.weglot-flags.flag-3.en> a :: before,
.weglot-flags.flag-3.en> span :: before {
background-position: -2520px 0! Important;
}
.weglot-flags.flag-3.pt> a :: before,
.weglot-flags.flag-3.pt> span :: before {
background-position: -4344px 0! ΠΠ°ΠΆΠ½ΠΎ;
}
Π§ΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΠΈΡΠ»ΠΈΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΠ΅ΡΡΠ½ΡΠΌ ΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ (24 ΠΏΠΈΠΊΡΠ΅Π»Ρ), ΡΡΠ΅Π±ΡΠ΅ΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
.
ΠΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° = (Π’ΡΠ΅Π±ΡΠ΅ΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ / ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) * ΡΠ΅ΠΊΡΡΠ΅Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π°
ΠΡΠΈΠΌΠ΅Ρ 1: ΠΠ°ΠΈΠΌΠ΅Π½ΡΡΠΈΠ΅ ΡΠ»Π°Π³ΠΈ
Π’ΠΈΠΏ ΡΠ»Π°Π³ΠΎΠ²: ΠΡΡΠ³
Π―Π·ΡΠΊΠΈ: Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ ΠΈ ΠΏΠΎΡΡΡΠ³Π°Π»ΡΡΠΊΠΈΠΉ
Π’ΡΠ΅Π±ΡΠ΅ΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ: 16px * 16px
.weglot-flags.flag-3.en> a :: before,
.weglot-flags.flag-3.en> span :: before {
background-position : -1680px 0! ΠΠ°ΠΆΠ½ΠΎ;
}
.weglot-flags.flag-3.pt> a :: before,
.weglot-flags.flag-3.pt> span :: before {
background-position: -2896px 0! important;
}
.weglot-flags.flag-3 a :: before,
.weglot-flags.flag-3 span :: before {
width: 16px! Important;
Π²ΡΡΠΎΡΠ°: 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ! Important;
-webkit-background-size: Π°Π²ΡΠΎ 16px! ΠΠ°ΠΆΠ½ΠΎ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π°Π²ΡΠΎ 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ! ΠΠ°ΠΆΠ½ΠΎ;
}
Π Π°ΡΡΠ΅Ρ Π΄Π»Ρ Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠ³ΠΎ ΡΠ»Π°Π³Π°: (16/24) * — 2520 = -1680
Π Π°ΡΡΠ΅Ρ Π΄Π»Ρ ΠΏΠΎΡΡΡΠ³Π°Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π°Π³Π°: (16/24) * — 4344 = -2896
Π’ΠΈΠΏ ΡΠ»Π°Π³Π°: ΠΡΡΠ³
Π―Π·ΡΠΊΠΈ: Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ ΠΈ ΠΏΠΎΡΡΡΠ³Π°Π»ΡΡΠΊΠΈΠΉ
Π’ΡΠ΅Π±ΡΠ΅ΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ: 48 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * 48 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
.weglot-flags.flag-3.en> a :: before,
.weglot-flags.flag-3.en> span :: before {
background-position: -5040px 0! important;
}
.weglot-flags.flag-3.pt> a :: before,
.weglot-flags.flag-3.pt> span :: before {
background-position: -8688px 0! ΠΠ°ΠΆΠ½ΠΎ;
}
.weglot-flags.flag-3 a :: before,
.weglot-flags.flag-3 span :: before {
width: 48px! Important;
Π²ΡΡΠΎΡΠ°: 48 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ! Important;
-webkit-background-size: Π°Π²ΡΠΎ 48px! ΠΠ°ΠΆΠ½ΠΎ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π°Π²ΡΠΎ 48 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ! ΠΠ°ΠΆΠ½ΠΎ;
}
Π Π°ΡΡΠ΅Ρ Π΄Π»Ρ Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠ³ΠΎ ΡΠ»Π°Π³Π°: (48/24) * — 2520 = -5040
Π Π°ΡΡΠ΅Ρ Π΄Π»Ρ ΠΏΠΎΡΡΡΠ³Π°Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π°Π³Π°: (48/24) * — 4344 = -8688
Π Π°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° CSS propriΓ©tΓ© | ZONE CSS
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π° CSS
.
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΏΠ»Π°Π½ ΠΡΡΡΠ΅ΡΠ° CSS background-size
Permet ΠΈΠ· ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡ Ρ
Π²ΠΎΡΡΠ° Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠ»Π°Π½Π΅ Π² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΡΠ΅ Π·ΠΎΠ½Ρ Π·ΠΎΠ½Ρ ΠΏΠ»Π°Π½ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Css ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΠΊΠ»ΠΈΠΏ
. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΎ Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ CSS background-image
ΠΈΠ»ΠΈ background
.
ΠΡΠΈΠΌΠ΅Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° CSS background-size
:
background-size : contain;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° : ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° : Π°Π²ΡΠΎ;
background-size : 10px 50%;
background-size : 50% Π°Π²ΡΠΎ;
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ ΡΡΠΈΠ»Ρ Π Π°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°
CSS peut prendre une / des valeurs de taille:
-
auto
: la taille de l’image d’arriΓ¨re-plan sa taille initiale . Valeur par dΓ©faut , revient mettreauto auto
. -
ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ
: la taille de l’arriΓ¨re-plan s’adapte Γ la taille de la zone d’arriΓ¨re plan sans deformation. -
ΠΊΡΡΡΠΊΠ°
: la taille de l’image de fond couvre toute la large et la hauteur de la zone d’arriΓ¨re plan sans dΓ©formation. L’image de fond peut Γͺtre rognΓ©e si elle est plus grande. - Π½ΠΎΠΌΠ΅Ρ Π½ΠΎΠΌΠ΅ΡΠ° : Π΄Π²Π° Π½ΠΎΠΌΠ΅ΡΠ° ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ° CSS Π΄ΠΎΠ»Π³ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΡΠ²Π»ΡΡΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΠ΅Π»Π΅ΠΌ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ Π±Π΅Π»ΡΠ΅: Π΄Π»ΠΈΠ½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π· ΠΏΠ»Π°Π½Π° ΠΈ Π²ΡΡΠΎΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π°.Si l’unitΓ© est en pourcentage (
%
), la valeur est calcΓ©e en fonction de la taille de la zone d’arriΓ¨re-plan.
Π½ΠΎΠΌΠ΅Ρ peut aussi prendre la valeur de «auto
«. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Π²ΡΡΡΠ΅ΡΠΈΠ»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π½ΠΎΠΌΠ΅ΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π²Π° ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ° Π½ΠΎΠΌΠ΅ΡΠΎΠ²
ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° background-size
CSS
Π£ΡΠ»ΠΎΠ²ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ CSS
background-size .
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS background-size
ΠΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ sur toutes les balises (X) HTML — ΡΡΠΎ ΠΏΠ»Π°Π½ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
La valeur de la CSS background-size
peut Γͺtre mise directement dans la propriΓ©tΓ© de raccourci CSS background
.
ProblΓ¨me d’interprΓ©tation de
background-size en Css.
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΡ ΡΡΠΈΠ»Ρ background-size
CSS n’est pas reconnue par les anciens navigateurs.
Π£ΡΠ»ΠΎΠ²ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
background-size en CSS3.
La CSS background-size
— ΡΡΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ ΡΡΠΈΠ»Ρ , ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ CSS ΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ² CSS .
Π ΠΊΠ°Π΄ΡΠ΅ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ-ΠΏΠ»Π°Π½ΠΎΠ², ΠΊΡΠ°ΡΠ½ΡΡ
, Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Css background-image
spΓ©cifier la taille Π² background-size
.