Π Π°Π·Π½ΠΎΠ΅

Π€ΠΎΠ½ для Π²Π΅Π± страницы: ⬇ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ D1 84 d0 be d0 bd d0 b2 d0 b5 d0 b1 d1 81 d1 82 d1 80 d0 b0 d0 bd d0 b8 d1 86 d1 8b, стоковыС Ρ„ΠΎΡ‚ΠΎ D1 84 d0 be d0 bd d0 b2 d0 b5 d0 b1 d1 81 d1 82 d1 80 d0 b0 d0 bd d0 b8 d1 86 d1 8b Π² Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΌ качСствС

01.07.1993

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ»Π°ΡΡŒ css

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ»Π°ΡΡŒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

РСшСниС

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство background со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ no-repeat для сСлСктора body .

ОписаниС

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ фоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° повторяСтся ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Π²Ρ‹ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡΡΡŒ ΠΌΠΎΠ·Π°ΠΈΠΊΠΎΠΉ Π½Π° всём ΠΏΠΎΠ»Π΅ Π²Π΅Π±-страницы. Однако Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° Π½Π΅ всСгда трСбуСтся, поэтому Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΈΠ΄Ρ‘Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ no-repeat , добавляСмоС ΠΊ стилСвому свойству background .

ΠžΠ±Ρ‰ΠΈΠΉ синтаксис Π² этом случаС Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ.

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС Ρ„ΠΎΠ½ добавляСтся ΠΊ Π²Π΅Π±-страницС, исходно Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡŒ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ отобраТаСтся СдинствСнный Ρ€Π°Π·, Ρ‚.Π΅. Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 1 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎ.

Π’ связи с особСнностями Π²Π΅Π±-страниц, Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ рисунки ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π°ΡŽΡ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ ΠΏΡ€ΠΈ вСрсткС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² сайта. ΠŸΡ€ΠΈ этом ΠΎΠ½ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΡƒΡ‡Π°ΡΡ‚Π²ΡƒΡŽΡ‚ Π² самых Ρ€Π°Π·Π½Ρ‹Ρ… Π΄Π΅Π»Π°Ρ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‚ процСсс присоСдинСния рисунков ΠΊ тСксту, ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Ρ„ΠΎΠ½ ΠΏΠΎΠ΄ содСрТимым. Π”Π°Π»Π΅Π΅ рассмотрСны Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ аспСкты примСнСния Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π€ΠΎΠ½ Π½Π° Π²Π΅Π±-страницС

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ рисунка

Рис. 1. Ѐоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π±Π΅Π· повторСния

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. Π€ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ графичСский рисунок target.gif опрСдСляСтся ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ Π²Π΅Π±-страницы Π±Π΅Π· повторСния изобраТСния. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π΅ ΠΏΡ€ΠΈΠ»Π΅Π³Π°Π»Π° ΠΏΠ»ΠΎΡ‚Π½ΠΎ ΠΊ краям Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΎΠ½Π° смСщаСтся Π½Π° 30 пиксСлов Π²ΠΏΡ€Π°Π²ΠΎ ΠΈ Π½Π° 20 пиксСлов Π²Π½ΠΈΠ· ΠΎΡ‚ своСго исходного полоТСния.

ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ рисунка

Благодаря Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ рисунка ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, доступно нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² оформлСния Π²Π΅Π±-страниц. НапримСр, для создания Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ полосы ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ (рис. 2) понадобится ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π½Π° рис. 3.

Рис. 2. ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ рисунка ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ

Рис. 3. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° для создания Ρ„ΠΎΠ½Π°

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ

Аналогично ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, создав Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈ установив Π΅Π³ΠΎ Π² качСствС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (рис. 4).

Рис. 4. ИспользованиС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° Π² качСствС Ρ„ΠΎΠ½Π°

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π²Π΅Π±-страницу, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΡƒΡŽ Π½Π° рис. 4, потрСбуСтся Π²Π½Π°Ρ‡Π°Π»Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ. Π¨ΠΈΡ€ΠΈΠ½Ρƒ достаточно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ 20-40 пиксСлов, Π° высота рисунка зависит ΠΎΡ‚ Ρ†Π΅Π»ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΠΎΠΉ высоты содСрТимого Π²Π΅Π±-страницы. НС стоит Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ рисунок большого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΡŽ объСма графичСского Ρ„Π°ΠΉΠ»Π°. А это ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ скаТСтся Π½Π° скорости Π΅Π³ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ, Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ замСдлСнию отобраТСния Ρ„ΠΎΠ½Π°. Для Π΄Π°Π½Π½ΠΎΠ³ΠΎ случая Π²ΠΏΠΎΠ»Π½Π΅ подошла ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 30Ρ…200 пиксСлов (рис. 5).

Рис. 5. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для создания Ρ„ΠΎΠ½Π°

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 3 ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΊΠΎΠ΄ HTML для создания Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3. ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ рисунок Ρ…ΠΎΡ€ΠΎΡˆΠΎ сочСтаСтся с ΠΎΠ΄Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹ΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, поэтому Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ добавляСтся слой, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈ отобраТаСтся содСрТимоС Π²Π΅Π±-страницы.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ рисунка ΠΊ тСксту

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 4. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ рисунка

ΠŸΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ с использованиСм CSS

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

На сСгодняшний дСнь ΠΎΡ‡Π΅Π½ΡŒ популярны сайты, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ всю ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ страницы.
НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… Π²Π΅Π±-сайтов:

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ схоТСй Β« Π²Π½Π΅ΡˆΠ½ΠΎΡΡ‚ΠΈ Β» Π² вашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ β€” Π²Ρ‹ Π½Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ ΠΏΡƒΡ‚ΠΈ.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ понятия

Π’ΠΎΡ‚ ΠΏΠ»Π°Π½ нашСй ΠΈΠ³Ρ€Ρ‹.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ свойство background-size для покрытия всСй области просмотра

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-запрос ΠΏΡ€ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½ΠΎΠΉ вСрсии Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств

Для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы Π½Π° ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… экрана ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Π΄ΠΈΠ°-запрос, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Но это Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ. Данная тСхнология прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈ Π±Π΅Π· этого.

Π‘ этим Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ Π² плюсС Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ добиваСмся покрытия всСй области просмотра Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚Π½Ρ‹Ρ… ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠ² выпускаСмых Π² настоящСС врСмя, Π½ΠΎ Π² минусС ΠΈΠΌΠ΅Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния. Π­Ρ‚ΠΎ ΠΎΠΊΠΎΠ»ΠΎ 1,7 Мб.

ΠžΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ объСм для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ лишь Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ идСя Π² любом случаС, Π° Π² случаС с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ устройствами это ΠΎΡ‡Π΅Π½ΡŒ плохая идСя. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ просто излишнС Π½Π° экранах с малСньким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ( ΠΎΠ± этом я расскаТу ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΏΠΎΠ·ΠΆΠ΅ ).

НиТС ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ всС, Ρ‡Ρ‚ΠΎ понадобится ΠΈΠ· Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ:

ΠœΡ‹ Π½Π°Π·Π½Π°Ρ‡ΠΈΠΌ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнту body ΠΈ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ добьСмся ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ покрытия Ρ„ΠΎΠ½ΠΎΠΌ.

Однако эта Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° сработаСт Π½Π° любом Π±Π»ΠΎΡ‡Π½ΠΎΠΌ элСмСнтС ( Ρ‚Π°ΠΊΠΎΠΌ ΠΊΠ°ΠΊ div ΠΈΠ»ΠΈ form ). Π’ случаС Ссли ΡˆΠΈΡ€ΠΈΠ½Π°-высота вашСго Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½Π°, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π½ΡΡ‚ΡŒ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

ΠœΡ‹ объявляСм свойства элСмСнта body ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Π‘Π°ΠΌΠΎΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅ свойство-Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² этом спискС:

А ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ растягиваСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ свСрх Π΅Π³ΠΎ настоящСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° β€” ΠΌΡ‹ тСряСм качСство изобраТСния ( Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами появляСтся пиксСлизация ):

НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΎΠ± этом, ΠΊΠΎΠ³Π΄Π° Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΠΎΠ΄Π±ΠΈΡ€Π°Ρ‚ΡŒ Ρ„ΠΎΠ½. Π’ Π΄Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ„ΠΎΡ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 5500 Π½Π° 3600px для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов, ΠΈ ΠΏΠΎΡ‚ΠΎΠΌΡƒ Π² этом случаС вряд Π»ΠΈ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ Π½Π΅Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅.

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ наш Ρ„ΠΎΠ½ Π±Ρ‹Π» Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, ΠΌΡ‹ объявили ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Π­Ρ‚ΠΎ установит ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ оси Π² Ρ†Π΅Π½Ρ‚Ρ€ области просмотра.

Π”Π°Π»Π΅Π΅ Π½Π°ΠΌ стоит Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с ситуациСй, ΠΊΠΎΠ³Π΄Π° высота ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° большС Ρ‡Π΅ΠΌ высота области просмотра. Когда ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ происходит β€” появляСтся скролл-Π±Π°Ρ€.

Π’ Π΄Π΅ΠΌΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ я Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ» Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Β« Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Β» для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ смогли ΠΏΡ€ΠΎΠ½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы.

ВсС Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ остаСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ β€” ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ со свойствами позиционирования ( background-attachment ΠΈ background-position ) Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ страницы ΠΈ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния свойств говорят сами Π·Π° сСбя.

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ запись CSS

Π’Ρ‹ΡˆΠ΅, для наглядности, я опрСдСлял CSS β€” свойства Π² ΠΏΠΎΠ»Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅.

А Ρ‚Π°ΠΊ выглядит краткая запись:

ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ остаСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΡΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ url Π½Π° ΠΏΡƒΡ‚ΡŒ ΠΊ вашСй ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅.

ΠžΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ: ΠΌΠ΅Π΄ΠΈΠ°-запрос Π½Π° ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½ΠΎΠΉ вСрсии Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

НС ΠΏΠΎΠΉΠΌΠΈΡ‚Π΅ мСня Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, Π½ΠΎ 114 ΠΊΠΈΠ»ΠΎΠ±Π°ΠΉΡ‚ это всС Ρ€Π°Π²Π½ΠΎ довольно ΠΌΠ½ΠΎΠ³ΠΎ для использования Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²ΠΈΠ΄Π°Ρ… Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. И ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ эти 114 ΠΊΠΈΠ»ΠΎΠ±Π°ΠΉΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² случаС нСобходимости, ΠΏΠΎΡ‚ΠΎΠΌΡƒ ΠΊΠ°ΠΊ, смотря Π½Π° статистику, слСдуСт Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ компромиссы ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

А Π²ΠΎΡ‚ ΠΈ сам ΠΌΠ΅Π΄ΠΈΠ°-запрос:

ΠœΠΈΠ½ΡƒΡ этого способа состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ, Ссли Π²Ρ‹ измСняСтС Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, с, допустим, 1200px Π΄ΠΎ 640px ( ΠΈΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚ ), Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΌΠ΅Ρ€Ρ†Π°ΡŽΡ‰ΠΈΠΉ экран, ΠΏΠΎΠΊΠ° мСньшСС ΠΈΠ»ΠΈ большСС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Если ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° счСт этой Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ, Ρ‚ΠΎ это ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ с ΠΎΡΡ‚ΠΎΡ€ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ ΠΊΠ°ΠΊ Ρ„Π°ΠΉΠ»Ρ‹ большого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ взаимодСйствиС, Π² особСнности ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ достаточно быстрого соСдинСния с ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ΠΎΠΌ. И это Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ стоит ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ вашСго сайта смог Π²ΠΈΠ΄Π΅Ρ‚ΡŒ содСрТимоС Π΅Ρ‰Π΅ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ ваши ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ для Π’Π΅Π±, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

ЛицСнзия: общСствСнноС достояниС

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ GitHub repo Π½Π΅ Π·Π°Ρ‰ΠΈΡ‰Π΅Π½ ΠΊΠ°ΠΊΠΈΠΌΠΈ Π»ΠΈΠ±ΠΎ авторскими ΠΏΡ€Π°Π²Π°ΠΌΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΡ€ΠΎΠ΄Π°Π²Π°Ρ‚ΡŒ, ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒ исходный ΠΊΠΎΠ΄. Запрос Π½Π° это Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ΅Π½.

( Π’Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅ΠΌ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ я Π½Π΅ являюсь. Она ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ Unsplash ).

Π€ΠΎΠ½ Π² CSS – памятка для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

ΠŸΡ€ΠΈ вёрсткС страниц Π²Π΅Π±-сайта часто трСбуСтся Π·Π°Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ читаСмости тСкста ΠΈ внСшнСго Π²ΠΈΠ΄Π° ΠΏΠΎΡ€Ρ‚Π°Π»Π° Π² Ρ†Π΅Π»ΠΎΠΌ. Какими способами ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ Π² CSS?

Π Π°Π±ΠΎΡ‚Π° с Ρ„ΠΎΠ½ΠΎΠΌ Π² CSS

background-color

Π—Π°Π΄Π°Ρ‘Ρ‚ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтам

background-image

Π”Π°Π½Π½ΠΎΠ΅ свойство ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для вставки Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, указывая ΠΏΡ€ΠΈ этом ссылку Π½Π° Π½Π΅Ρ‘.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ, Ρ‡Ρ‚ΠΎ ΠΈ Ρ„Π°ΠΉΠ» стилСй CSS. Π˜Π½Π°Ρ‡Π΅ придётся ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ.

background-repeat

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΏΠΎ всСму экрану благодаря Π΄Π°Π½Π½ΠΎΠΌΡƒ свойству.

Оно ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

НапримСр, ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ выглядит Ρ‚Π°ΠΊ:

background-attachment

Π­Ρ‚ΠΎ свойство опрСдСляСт фиксированиС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния ΠΏΡ€ΠΈ скроллингС:

background-position

Π”Π°Π½Π½ΠΎΠ΅ свойство опрСдСляСт располоТСниС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ экрана. ЗначСния свойства ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой Π½Π°Π±ΠΎΡ€ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, отсчСт ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… начинаСтся с Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π°.

gradient

ΠŸΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ, ΠΏΡ€ΠΈΡ‡Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² допускаСтся нСсколько.

ИспользованиС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ наглядно ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΊΠΎΠ΄Π°:

Если ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ свойство, для Π½Π΅Π³ΠΎ устанавливаСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Π Π°Π±ΠΎΡ‚Π° с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Ρ„ΠΎΠ½Π° Π² CSS

Π’ CSS 2.1 фоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° сохраняСт фиксированный Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΎΠ΄Π½Π°ΠΊΠΎ Π² CSS 3 Π±Ρ‹Π»ΠΎ Π²Π²Π΅Π΄Π΅Π½ΠΎ подсвойство size, благодаря ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ растянуто ΠΈΠ»ΠΈ сТато.

БущСствуСт нСсколько способов, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€:

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

Π¨ΠΈΡ€ΠΈΠ½Π° ΠΈ высота ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ автоматичСски, Π° Π½ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния.

НапримСр, Ссли исходноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ 300 Π½Π° 300 пиксСлСй, Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ сдСлаСт Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² Π΄Π²Π° Ρ€Π°Π·Π° мСньшС:

Если ΡƒΠΊΠ°Π·Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ считаСтся ΠΊΠ°ΠΊ ΡˆΠΈΡ€ΠΈΠ½Π°, высота опрСдСляСтся автоматичСски, ΠΈ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ.

Код, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° 100 Π½Π° 100 пиксСлСй, выглядит Ρ‚Π°ΠΊ:

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

Если ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹, Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π½Π΅ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, Π° Π½Π° элСмСнтС.

Π’ΠΎ Π΅ΡΡ‚ΡŒ, ΡˆΠΈΡ€ΠΈΠ½Π° Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния зависит ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Если ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° составляСт 600 пиксСлСй, Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡΡ Π΄ΠΎ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρ‹ 300 Π½Π° 300 пиксСлСй.

Как ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°, использованиС ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ² вСсьма ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎ максимального Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

Π’ свойствС background-size Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ contain ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ заполняло ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈΠ»ΠΈ всю страницу.

УмСньшСниС ΠΈΠ»ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ происходит ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° высота ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π·Π° Ρ€Π°ΠΌΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π’Π°ΠΊΠΎΠΉ Ρ„ΠΎΠ½ страницы Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΡ‚ΡŒΡΡ ΠΏΠΎΠ΄ любоС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅:

Π—Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠΌ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π² свойствС background-size Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ cover, Ρ„ΠΎΠ½ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ всё пространство ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π’ Ρ‚ΠΎΠΌ случаС, Ссли ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ сторон Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° обрСТСтся:

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ сразу Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²

Они ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ списка Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ запятыми Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ порядкС:

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° Π² CSS

ΠŸΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ элСмСнт Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π°ΠΌΠ΅Ρ‚Π΅Π½ Π½Π° Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ рисункС. Π’ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ достигаСтся Π·Π° счёт свойства opacity ΠΈΠ»ΠΈ Π·Π°Π΄Π°Π²Π°Π΅ΠΌΠΎΠ³ΠΎ для Ρ„ΠΎΠ½Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Ρ†Π²Π΅Ρ‚Π° RGBA.

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ дСйствуСт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Ρ„ΠΎΠ½, Π½ΠΎ ΠΈ Π½Π° всС Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты. ПослС увСличСния прозрачности, ΠΈ тСкст ΠΈ Ρ„ΠΎΠ½ станут ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ создания ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°:

Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС opacity Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΈ слСдуСт Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ RGBA, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠΎΠΌΠΈΠΌΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ яркости синСго, красного ΠΈ Π·Π΅Π»Ρ‘Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠ² устанавливаСтся Π΅Ρ‰Ρ‘ ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ прозрачности. 1 ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΡƒΡŽ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, Π° 0 β€” ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ.

Π Π°Π±ΠΎΡ‚Π° с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ (изобраТСниями) Π² CSS

2013-03-01 / Π’Ρ€:23:32 / просмотров: 115548

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° сайтС ΠΈΠΌΠ΅ΡŽΡ‚ Π΄Π²Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ: Π²ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΎΠ½ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‚ внСшний Π²ΠΈΠ΄ рСсурса, Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π»ΡƒΡ‡ΡˆΠ΅.
Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ здСсь Π΄Π΅Π»Π°Ρ‚ΡŒ большоС вступлСниС, Π° ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ»ΡŽ сразу ΠΊ Π΄Π΅Π»Ρƒ.
Π˜Ρ‚Π°ΠΊ, Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я расскаТу ΠΎ всСх Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… способах Ρ€Π°Π±ΠΎΡ‚Ρ‹ с изобраТСниями: вставка Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния, ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, Ρ‚Π΅Π½ΡŒ ΠΎΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈ Ρ‚. Π΄.

Ѐоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°.

background | background-image

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π²Π΅Π±-страницу, Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ стилСвым свойством background, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ задаСтся ΠΊ сСлСктору body. Π—Π°Π΄Π°ΠΉΡ‚Π΅ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π²Π½ΡƒΡ‚Ρ€ΠΈ значСния url.

Как Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ графичСский ΠΏΡƒΡ‚ΡŒ? ГрафичСский ΠΏΡƒΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΎΠ½ располагаСтся.
НапримСр, Ссли HTML-Ρ„Π°ΠΉΠ» ΠΈ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок с ΠΈΠΌΠ΅Π½Π΅ΠΌ bg.gif хранятся Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅, Ρ‚ΠΎ достаточно Π·Π°Π΄Π°Ρ‚ΡŒ url(bg.gif), Ссли Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок хранится Π² ΠΏΠ°ΠΏΠΊΠ΅ images, Ρ‚ΠΎΠ³Π΄Π° ΠΏΡƒΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠΌ url(images/bg.gif).

Π‘ΠΎΠ²Π΅Ρ‚: ΡƒΡ‡Ρ‚ΠΈΡ‚Π΅, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ загруТаСтся Π½Π΅ сразу, поэтому Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚ загруТаСтся ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎ. Π—Π°Π΄Π°ΠΉΡ‚Π΅ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Ρƒ Π±Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊ Ρ†Π²Π΅Ρ‚Ρƒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ рисунка.

ΠŸΠΎΠ²Ρ‚ΠΎΡ€ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

background-repeat

Π‘Ρ‹Π²Π°ΡŽΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°ΠΌΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. НапримСр, Π½Π°ΠΌ Π²Ρ‹Π³ΠΎΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π±Ρ‹Π» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈΠ»ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Π° Π±Ρ‹Π²Π°Π΅Ρ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π½Π°ΠΌ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ Π½ΡƒΠΆΠ΅Π½. Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π½Π°ΠΌ Π²Ρ‹ΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒΡΡ Π² этой ситуации? Π’ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ стилСвым свойством background-repeat.

background-repeat: repeat-y | repeat-x | no-repeat;

Если Π½Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ стилСвоС свойство background-repeat, Ρ‚ΠΎΠ³Π΄Π° Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-страницы Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π»ΠΈΡ‚ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄Π²Π΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° Π²Π΅Π±-страницу.

background

Π‘Ρ‹Π²Π°ΡŽ Ρ‚Π°ΠΊΠΈΠ΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π²Π° Ρ„ΠΎΠ½Π° для сайта. НапримСр, ΠΎΠ΄ΠΈΠ½ Ρ„ΠΎΠ½ повторяСтся ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ„ΠΎΠ½ выводится Π±Π΅Π· повторСния.
Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π΄Π²Π΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ старым Π΄ΠΎΠ±Ρ€Ρ‹ΠΌ способом. По ΠΊΡ€Π°ΠΉΠ½Π΅ ΠΌΠ΅Ρ€Π΅ я знаю Ρ‚ΠΎΡ‡Π½ΠΎ, всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ этот ΠΌΠ΅Ρ‚ΠΎΠ΄.
Π—Π°Π΄Π°Π΄ΠΈΠΌ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ элСмСнтам β€” HTML ΠΈ BODY.

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ нСсколько ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Как Π² css ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

background-size

НС зависимо ΠΎΡ‚ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΎΡ‚ мСньшСго Π΄ΠΎ большСго. Π’ CSS для измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ свойство background-size.
Π’ свойствС background-size ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ px, em, cm ΠΈ Π΄Ρ€..

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота установлСна ΠΊΠ°ΠΊ auto, Ρ‡Ρ‚ΠΎ оставляСт исходныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния.

МоТно Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΈ это Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒΡΡ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ. Π’ΠΎΠ³Π΄Π° высота Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ°ΠΊ auto ΠΈ сохранятся ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ снизу.

ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ (Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅) ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ тСкстом.

float

float: left | right | none ;

left β€” Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ Π΅Π³ΠΎ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΉ сторонС.

right β€” Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΏΠΎ Π»Π΅Π²ΠΎΠΉ сторонС.

none β€” Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π½Π΅ задаСтся (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ).

Π—Π΄Π΅ΡΡŒ я ΡƒΠΊΠ°Π·Π°Π» отступы тСкста ΠΎΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

ВСнь ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

box-shadow

НСбольшая Ρ‚Π΅Π½ΡŒ ΠΏΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ страницС эффСкт трСхмСрности, ΠΎΠ±ΡŠΡ‘ΠΌΠ° ΠΈ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹. Для добавлСния Ρ‚Π΅Π½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ свойство box-shadow.

ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

Начну сразу с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°.

Π‘ Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΠΌΠΈ поТСланиями Webmasterok2009

Π Π°Π±ΠΎΡ‚Π° с Ρ„ΠΎΠ½ΠΎΠΌ элСмСнта Π² CSS

Π’ этом ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ΅ ΠΌΡ‹ ΡƒΠΆΠ΅ рассмотрСли с Π²Π°ΠΌΠΈ Ρ‚Π°ΠΊΠΈΠ΅ аспСкты Ρ€Π°Π±ΠΎΡ‚Ρ‹ с изобраТСниями ΠΊΠ°ΠΊ использованиС свойств Π³Ρ€Π°Π½ΠΈΡ† (Ρ†Π²Π΅Ρ‚, ΡΡ‚ΠΈΠ»ΡŒ ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π°), Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (Π‘Ρ‚Π°Ρ‚ΡŒΡ «ВСнь элСмСнта Π² CSSΒ»), рассмотрСли, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСкт Ρ€Π°ΠΌΠΊΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ ΠΈ пустой ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ (Π‘Ρ‚Π°Ρ‚ΡŒΡ «Блочная ΠΈ строчная модСль Π² CSSΒ»). ΠΠ°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ Π΄Π΅Π»Π°Ρ‚ΡŒ изобраТСния ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌΠΈ (Π‘Ρ‚Π°Ρ‚ΡŒΡ Β«ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты Π² CSSΒ») ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΡ€Π°Π΅Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта, Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ внСшними отступами ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами, Π½ΠΎ всСго этого ΠΏΠΎΠΊΠ° Π½Π΅ достаточно.

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π’Ρ‹ смогли ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎ настоящСму красочныС, яркиС ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ сайты, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ ΠΈ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π·Π°Π΄Π½ΠΈΠΌ Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ с Ρ‚Π°ΠΊΠΈΠΌ свойством ΠΊΠ°ΠΊ background-image, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ нСсколько Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для элСмСнта.

Π€ΠΎΠ½ элСмСнта это ΠΎΠ±Ρ‰ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ элСмСнта, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ значСния Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… отступов (padding) ΠΈ Π³Ρ€Π°Π½ΠΈΡ† (border), Π½ΠΎ, Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Π½Π΅ΡˆΠ½ΠΈΡ… отступов – свойство margin.

Π’ настоящСС врСмя Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с трСмя графичСскими Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌΠΈ:

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство background-image ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, Ρ‚Π°ΠΊ ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ:

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ использовании ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΡƒΡ‚ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ адрСса Ρ„Π°ΠΉΠ»Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, Π° Π½Π΅ HTML страницы Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ прСдполагаСтся использованиС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ установим Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдставляСт ΠΈΠ· сСбя Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹Ρ… ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 100 Π½Π° 100 пиксСлСй для элСмСнта :

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ размСщаСтся Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ элСмСнта ΠΈ повторяСтся ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ это ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ элСмСнт ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ заполнился Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ всСгда ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° Π² качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, Π² этом случаС, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ, Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ использован Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ Π’Π°ΠΌΠΈ Ρ†Π²Π΅Ρ‚. Π—Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅ этот ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΌΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ ΠΊ Π½Π΅ΠΌΡƒ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ… этого ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ°.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 115 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ установки изобраТСния Π² качСствС Ρ„ΠΎΠ½Π°.

Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠΌ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

Как ΠΌΡ‹ с Π²Π°ΠΌΠΈ установили ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ размСщаСтся ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ элСмСнта ΠΈ повторяСтся ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. Π”Π°Π²Π°ΠΉΡ‚Π΅ научимся ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ эти ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ значСния ΠΈ для Π½Π°Ρ‡Π°Π»Π° рассмотрим, ΠΊΠ°ΠΊ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠΌ изобраТСния, Π° ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΌ Π² этом CSS свойство background-repeat.

Π­Ρ‚ΠΎ свойство ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ доступныС значСния:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
repeatΠ€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
repeat-xΠ€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (ΠΏΠΎ оси x).
repeat-yΠ€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ (ΠΏΠΎ оси y).
no-repeatΠ€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ.

Для ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдставляСт ΠΈΠ· сСбя Π΄Π²Π° Ρ€Π°Π·Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹Ρ… ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 10 Π½Π° 10 пиксСлСй.

По Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ с ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ для ΠΌΡ‹ установили Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ дублируСтся ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΡ‹ создали для Π½Π°ΡˆΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ² Ρ‚Ρ€ΠΈ класса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния для свойства background-repeat:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 116 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ управлСния ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠΌ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ позиционируСтся Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ элСмСнта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ CSS свойство background-position ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ это ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с использованиСм Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния CSS, Π»ΠΈΠ±ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова:

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования этого свойства:

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, ΠΌΡ‹ создали 10 Π±Π»ΠΎΠΊΠΎΠ² с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ классами, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°Π΄Π°Π½Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния, связанныС с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Для ΠΏΠ΅Ρ€Π²Ρ‹Ρ… дСвяти Π±Π»ΠΎΠΊΠΎΠ² Π±Ρ‹Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ всСвозмоТныС ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова, Π° для послСднСго Π±Π»ΠΎΠΊΠ° Π±Ρ‹Π»ΠΎ Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ позиционирования Π² пиксСлях, Π° для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ….

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 117 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ позиционирования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

Ѐиксированный Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½

Когда Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ содСрТимоС страницы Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, прокручиваСтся вмСстС с содСрТимым. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° Π·Π°Π΄Π°Ρ‡, Π½ΠΎ срСдствами CSS Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, зафиксировав Π΅Π³ΠΎ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ с Π’Π°ΠΌΠΈ рассмотрим, ΠΊΠ°ΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства background-attachment ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ «параллакс» эффСкт.

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ для всСх элСмСнтов

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 118 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ фиксированного Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

Бвойства CSS 3 для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями

Настало врСмя ΡƒΠ³Π»ΡƒΠ±ΠΈΡ‚ΡŒ свои знания Π² Ρ€Π°Π±ΠΎΡ‚Π΅ с Π·Π°Π΄Π½ΠΈΠΌ Ρ„ΠΎΠ½ΠΎΠΌ элСмСнтов ΠΈ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π½ΠΎΠ²Ρ‹ΠΌΠΈ свойствами CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ Π²Π²Π΅Π΄Π΅Π½Ρ‹ Π² стандартС CSS 3.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния этого свойства:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
padding-boxΠ€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ позиционируСтся ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° элСмСнта (ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠ΄ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ элСмСнта с этих сторон). Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
border-boxΠ€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ позиционируСтся ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° элСмСнта (ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠ΄ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ элСмСнта).
content-boxΠ€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ позиционируСтся ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° содСрТимого элСмСнта.

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ этого свойства:

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ размСстили Ρ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ°, Π·Π°Π΄Π°Π»ΠΈ для Π½ΠΈΡ… Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ Π² Π²ΠΈΠ΄Π΅ изобраТСния ΠΈ ΡƒΠΊΠ°Π·Π°Π»ΠΈ для Π½ΠΈΡ… Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния свойства background-origin:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 119 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования свойства background-origin.

Π£ Вас ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ вопрос: β€” А Π² Ρ‡Π΅ΠΌ собствСнно Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ свойством background-origin alt=Β»mini3β€³ />ΠΈ background-clip alt=Β»mini3β€³ />?

Π Π°Π·Π½ΠΈΡ†Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ свойство background-clip Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ background-origin ΠΎΠ±Ρ€Π΅Π·Π°Π΅Ρ‚ Ρ‚Ρƒ Ρ‡Π°ΡΡ‚ΡŒ Ρ„ΠΎΠ½Π°, которая Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΈΠ· ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… Ρ€Π°ΠΌΠΎΠΊ. Бвойство background-origin лишь опрСдСляСт, ΠΊΠ°ΠΊ позиционируСтся Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ прСдставлСны Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния этого свойства:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
border-boxΠ€ΠΎΠ½ элСмСнта Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всС пространство (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта). Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
padding-boxΠ€ΠΎΠ½ элСмСнта Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всС пространство (Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π³Ρ€Π°Π½ΠΈΡ† элСмСнта).
content-boxΠ€ΠΎΠ½ элСмСнта Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всС содСрТимоС элСмСнта (Ссли Ρƒ элСмСнта установлСны значСния padding (Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы), Ρ‚ΠΎ это пространство Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΊΡ€Π°ΡˆΠ΅Π½ΠΎ).

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ размСстили Ρ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ°, установили для Π½ΠΈΡ… Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ Π² Π²ΠΈΠ΄Π΅ изобраТСния ΠΈ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния свойства background-clip:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 120 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования свойства background-clip.

Как Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ свойства background-origin alt=Β»mini3β€³ />ΠΈ background-clip alt=Β»mini3β€³ />, ΠΈΠΌΠ΅Π΅Ρ‚ смысл ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Ρƒ элСмСнта Π΅ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы, Π»ΠΈΠ±ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° допускаСтся с использованиСм Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния CSS, ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ², Π»ΠΈΠ±ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов:

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ этого свойства:

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ размСстили ΠΏΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠΎΠ², Π·Π°Π΄Π°Π»ΠΈ для Π½ΠΈΡ… Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ Π² Π²ΠΈΠ΄Π΅ изобраТСния ΠΈ ΡƒΠΊΠ°Π·Π°Π»ΠΈ для Π½ΠΈΡ… Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния свойства background-size:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 121 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ свойство background

БущСствуСт Π±ΠΎΠ»Π΅Π΅ простой ΠΌΠ΅Ρ‚ΠΎΠ΄ Π·Π°Π΄Π°Ρ‚ΡŒ значСния всСх свойств для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π·Π°Π΄Π½ΠΈΠΌ Ρ„ΠΎΠ½ΠΎΠΌ Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ свойство background.

Бвойство background ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ синтаксис:

Π“Π΄Π΅ значСния ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π²Ρ‹ΡˆΠ΅Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Π½Π½Ρ‹ΠΌ Π½Π°ΠΌΠΈ свойствам:

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ свойства background:

И Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ сдСлали Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСй Ρ€Π°Π±ΠΎΡ‚Ρ‹:

Рис. 122 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ свойства background.

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ установка Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² качСствС Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° для ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π° для дСмонстрации возмоТностСй CSS. Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв ΠΏΡ€ΠΎΡ‰Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ для ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта, Π° ΡƒΠΆΠ΅ этот элСмСнт Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠ°ΠΊ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ позиционирования элСмСнтов Π±ΡƒΠ΄Π΅Ρ‚ освСщСно Π΄Π°Π»Π΅Π΅ Π² ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ΅ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Β«ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов Π² CSSΒ».

Вопросы ΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΡŽ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π΅ΠΌΡ‹ ΠΏΡ€ΠΎΠΉΠ΄ΠΈΡ‚Π΅ практичСскоС Π·Π°Π΄Π°Π½ΠΈΠ΅:

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ β„– 28.

Подсказка: для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ auto для Π²Π½Π΅ΡˆΠ½ΠΈΡ… отступов слСва ΠΈ справа, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ использована Ρ‚Π΅Π½ΡŒ для Π±Π»ΠΎΠΊΠΎΠ².

Если Ρƒ Вас Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ трудности ΠΏΡ€ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ практичСского задания, Π’Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈ ΠΏΡ€ΠΎΠΈΠ½ΡΠΏΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ страницу, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ CSS Π±Ρ‹Π» использован.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ? Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ? Β© 2022
Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ, опубликованная Π½Π° сайтС, носит ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€ ΠΈ Π½Π΅ являСтся Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠ΅ΠΉ ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡŽ. ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΡƒΡŽ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΡΡ‚Π°Ρ€ΡˆΠ΅ 18 Π»Π΅Ρ‚. 18+

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ
сайт wsfox.ru ΠΏΠΎΠΌΠΎΠ³ΠΈΡ‚Π΅ изобраТСния ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ полноцСнная ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π±Ρ‹Π»Π°, Π° Π½Π΅ ΠΊΠ°ΠΊ.

ΠŸΠΎΠ΄ΡΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² html, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π»ΠΎΡΡŒ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅?
НуТно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π»ΠΎΡΡŒ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Π»ΠΎΡΡŒ ΠΏΠΎ.

Π Π°ΠΌΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ скачСт, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π΅ измСняли ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ?
Π₯ΠΎΡ‡Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ скачСт, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π΅.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ число Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ»ΠΎΡΡŒ?
Вопрос ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ. Π’ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΡ‚ 0 Π΄ΠΎ 9) Π»Π΅ΠΆΠ°Ρ‚ числа, Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ фоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° повторяСтся ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Π²Ρ‹ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡΡΡŒ ΠΌΠΎΠ·Π°ΠΈΠΊΠΎΠΉ ΠΏΠΎ всСму элСмСнту. Π’Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π΅ всСгда трСбуСтся, часто ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для стилизации ΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·. Для этого ΠΊ свойству background-repeat добавляСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ no-repeat , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 1.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. Π€ΠΎΠ½ Π²Π΅Π±-страницы

Π—Π΄Π΅ΡΡŒ фоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° выводится для всСй Π²Π΅Π±-страницы, поэтому стилСвыС свойства Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΊ сСлСктору body . Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 1.

Бинтаксис мноТСствСнного Ρ„ΠΎΠ½Π°. CSS3 для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ²

Бинтаксис мноТСствСнного Ρ„ΠΎΠ½Π°. CSS3 для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ²

Π’ΠΈΠΊΠΈΠ§Ρ‚Π΅Π½ΠΈΠ΅

CSS3 для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ²
Π‘ΠΈΠ΄Π΅Ρ€Ρ…ΠΎΠ»ΠΌ Дэн

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Бинтаксис мноТСствСнного Ρ„ΠΎΠ½Π°

ΠŸΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ эти Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ изобраТСния Π² качСствС Ρ„ΠΎΠ½Π° элСмСнта body ΠΎΡ‡Π΅Π½ΡŒ просто с использованиСм Π½ΠΎΠ²ΠΎΠ³ΠΎ синтаксиса CSS3:

body {

background:

url(../img/stars-1.png) repeat-x fixed -130% 0,

url(../img/stars-2.png) repeat-x fixed 40% 0,

url(../img/space-bg.png) repeat-x fixed -80% 0,

url(../img/clouds. png) repeat-x fixed 100% 0;

background-color: #1a1a1a;

}

Π§Π΅Ρ‚Ρ‹Ρ€Π΅ изобраТСния Π½Π°ΡΠ»Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ – ΠΎΠ±Π»Π°ΠΊΠ° Π² самый Π½ΠΈΠ·, Π·Π²Π΅Π·Π΄Ρ‹ Π½Π° самый Π²Π΅Ρ€Ρ… – Π² Π²ΠΈΠ΄Π΅ списка, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ запятыми (ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ пСрСчислСниС начинаСтся с того изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Β«Π±Π»ΠΈΠΆΠ΅Β» ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ). КаТдоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ дублируСтся ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΠΈ ΠΈΠΌ выставлСны Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ полоТСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ слой двигался со своСй ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠΎΠ³Π΄Π° мСняСтся Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. НаконСц, ΠΈΡ… ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° страницС зафиксировано с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ значСния fixed.

ΠŸΠΎΡ‡Ρ‚ΠΈ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ #1a1a1a Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ background-color Π² самом ΠΊΠΎΠ½Ρ†Π΅.

Π­Ρ‚ΠΎ всС (рис.Β 5.04). Π—Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ ΡƒΠ΄Π°Π»ΠΎΡΡŒ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· лишнСй Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. ВсС эти изобраТСния Π²Ρ‹ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ Π½Π° элСмСнт body, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ·Π°Π΄ΠΈ содСрТимого страницы, Π½ΠΎ Π½Π°ΠΌ Π½Π΅ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ ΠΎΠ±Π΅Ρ€Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΡ… в лишниС Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ слои.

Рис. Β 5.04. Π§Π΅Ρ‚Ρ‹Ρ€Π΅ PNG-изобраТСния наслоСны ΠΎΠ΄Π½ΠΎ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ, Ρ€Π°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ тСмно– сСрый Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°

Π”Π°Π½Π½Ρ‹ΠΉ тСкст являСтся ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠΌ.

Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°

Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° задаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства background-color. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ тСкст, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠΌ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° задаСтся, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ Π³Π»Π°Π²Π΅, ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… способов: Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚Π°, ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ

ГЛАВА 8. ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ Ρ„ΠΎΠ½Π°. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹Β 

ГЛАВА 8. ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ Ρ„ΠΎΠ½Π°. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹Β  Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ Π³Π»Π°Π²Π΅ ΠΌΡ‹ познакомились со стилями ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ стилСй CSS, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… создаСтся прСдставлСниС Web-страниц. ΠœΡ‹ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ разновидности стилСй ΠΈ Π΄Π²Π΅ разновидности Ρ‚Π°Π±Π»ΠΈΡ† стилСй ΠΈ выяснили, ΠΊΠ°ΠΊ ΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„ΠΎΠ½Π°

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„ΠΎΠ½Π° Π—Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ² с ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ тСкста, займСмся Ρ„ΠΎΠ½ΠΎΠΌ. Π€ΠΎΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ для Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° тСкста (встроСнного элСмСнта), Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π΅Π΅ ячСйки ΠΈ всСй Web-страницы. Π₯ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Π½Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ Web-страницу ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΅Π΅

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„ΠΎΠ½Π°

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„ΠΎΠ½Π° Π—Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ² с ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ тСкста, займСмся Ρ„ΠΎΠ½ΠΎΠΌ. Π€ΠΎΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ для Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° тСкста (встроСнного элСмСнта), Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π΅Π΅ ячСйки ΠΈ всСй Web-страницы. Π₯ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Π½Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ Web-страницу ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΅Π΅

1.3.3.1. ИзмСнСниС Ρ„ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола

1.3.3.1. ИзмСнСниС Ρ„ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ мСню БистСма?ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹?ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅?Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π’ΠΈΠ΄ (ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ стопС ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ контСкстном мню ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола). РаскроСтся ΠΎΠΊΠ½ΠΎ Настройка внСшнСго Π²ΠΈΠ΄Π° (рис.

24.2. ИзмСнСниС Ρ„ΠΎΠ½Π° страницы Π²Ρ…ΠΎΠ΄Π° Π² систСму

24.2. ИзмСнСниС Ρ„ΠΎΠ½Π° страницы Π²Ρ…ΠΎΠ΄Π° Π² систСму Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρƒ Π²Ρ…ΠΎΠ΄Π° Π² систСму ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π½Π΅ Ρ‚Π°ΠΊ часто, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΡ€Π΅Π΄ΡŠΡΠ²Π»ΡΡ‚ΡŒ ΠΊ Π΅Π΅ красотС ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ особыС трСбования. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ этой страницы ΠΌΠΎΠΆΠ½ΠΎ, ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это достаточно просто. Π’ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹Π΅

Π—Π°ΠΌΠ΅Π½Π° Ρ„ΠΎΠ½Π° Π² ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов Π² ΠŸΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΠ΅

Π—Π°ΠΌΠ΅Π½Π° Ρ„ΠΎΠ½Π° Π² ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов Π² ΠŸΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΠ΅ БущСствуСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ установки своСго Ρ„ΠΎΠ½Π° для ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов Π² ΠŸΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΠ΅. Для этого Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ рССстра HKEY_CURRENT_USERSOFTWAREMicrosoftInternet ExplorerToolbar создайтС строковый ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ BackBitmapShell, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΠ΅ имя

ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ 40: ΠŸΡ€ΠΎΠ΄ΡƒΠΌΡ‹Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ использованию мноТСствСнного наслСдования

ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ 40: ΠŸΡ€ΠΎΠ΄ΡƒΠΌΡ‹Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ использованию мноТСствСнного наслСдования Когда Ρ€Π΅Ρ‡ΡŒ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎ мноТСствСнном наслСдовании (multiple inheritance – MI), сообщСство Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π½Π° C++ раздСляСтся Π½Π° Π΄Π²Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… лагСря.

Одни ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Ρ€Π°Π· ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠ΅ исслСдованиС (SI) – это Ρ…ΠΎΡ€ΠΎΡˆΠΎ,

Π’Ρ‹Π±ΠΎΡ€ ΠΈ настройка Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ

Π’Ρ‹Π±ΠΎΡ€ ΠΈ настройка Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°, Π½ΠΎ ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΠ½ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ. Для этого ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π€ΠΎΠ½, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡ ΠΏΡ€ΠΈΠΌΠ΅Ρ‚ Π²ΠΈΠ΄, ΠΊΠ°ΠΊ Π½Π° рис. 7.11. Рис. 7.11. Π Π°Π±ΠΎΡ‚Π° Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅

18.6. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ мноТСствСнного Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ наслСдования A

18.6. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ мноТСствСнного Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ наслСдования A ΠœΡ‹ продСмонстрируСм ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ использованиС мноТСствСнного Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ наслСдования, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π² ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ шаблонов классов Array (см. Ρ€Π°Π·Π΄Π΅Π» 2.4) Π½Π° основС шаблона Array (см. Π³Π»Π°Π²Ρƒ 16), ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½

17.3.2. ИзмСнСниС Ρ„ΠΎΠ½Π° слайда

17. 3.2. ИзмСнСниС Ρ„ΠΎΠ½Π° слайда На Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π€ΠΎΠ½Ρ‹ страниц (рис.Β 17.7) Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ слайда. МоТно ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ всСх слайдов сразу, Π° ΠΌΠΎΠΆΠ½ΠΎ β€” Ρ„ΠΎΠ½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… слайдов. ΠŸΡ€ΠΈ Π΄Π²ΠΎΠΉΠ½ΠΎΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ Π½Π° ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠ΅ΠΌΡΡ Ρ„ΠΎΠ½Π΅ измСнСния Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΊΠΎ всСм слайдам (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½

3.3.2. ИзмСнСниС Ρ„ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола

3.3.2. ИзмСнСниС Ρ„ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола Окно ΠŸΠ΅Ρ€ΡΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡ (рис.Β 3.12) позволяСт ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола β€” ΠΎΡ‚ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ рисунка Π΄ΠΎ заставки (хранитСля экрана). ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ это ΠΎΠΊΠ½ΠΎ. Π’ области ИзмСнСниС изобраТСния ΠΈ Π·Π²ΡƒΠΊΠ° Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈΠ· Ρ‚Π΅ΠΌ

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ мноТСствСнного наслСдования

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ мноТСствСнного наслСдования ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½ΠΎΠ΅ наслСдованиС это, ΠΏΠΎ сути, прямоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡƒΠΆΠ΅ рассмотрСнных ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² наслСдования, — класс Π²ΠΏΡ€Π°Π²Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ΅ число Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ.

Однако, изучая этот вопрос Π±ΠΎΠ»Π΅Π΅ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚ΡŒ Π΄Π²Π΅ интСрСсныС

УскорСниС отобраТСния Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² Ρ„ΠΎΠ½Π°

УскорСниС отобраТСния Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² Ρ„ΠΎΠ½Π° Как Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΎΡΡŒ Π²Ρ‹ΡˆΠ΅, Ρ„ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Π½Π½ΡƒΡŽ срСдствами самого Flash. Π’Π°ΠΊΠΆΠ΅ Ρ„ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ экзСмпляры β€” графичСскиС ΠΈΠ»ΠΈ ΠΊΠ»ΠΈΠΏΡ‹. Π’ΠΎΡ‚ ΠΎ ΠΊΠ»ΠΈΠΏΠ°Ρ… (Π² смыслС, экзСмплярах ΠΎΠ±Ρ€Π°Π·Ρ†ΠΎΠ²-ΠΊΠ»ΠΈΠΏΠΎΠ²), ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… для

Π’Ρ‹Π±ΠΎΡ€ Ρ„ΠΎΠ½Π°

Π’Ρ‹Π±ΠΎΡ€ Ρ„ΠΎΠ½Π° Π‘Π½ΠΈΠΌΠ°Ρ‚ΡŒ Π΄ΠΎΠΌΠ° Π½Π° «СстСствСнном» Ρ„ΠΎΠ½Π΅ Π½Π΅ стоит β€” Ρ‚Π°ΠΊΠΈΠ΅ снимки Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ слишком домашними, Π½Π΅ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ. Π€ΠΎΠ½ΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ ровная однотонная ΠΏΠΎΠ²Π΅Ρ€Ρ…Π½ΠΎΡΡ‚ΡŒ, которая Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΎΡ‚ самого ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π°. Бнимая свСтлый ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚,

Как ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Π²Π΅Π±-страницы

Π― наткнулся Π½Π° прСкрасноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-страницС. Π― Π½Π΅ ΠΌΠΎΠ³Ρƒ Π΅Π³ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠŸΠΎΡ…ΠΎΠΆΠ΅, это Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Как я ΠΌΠΎΠ³Ρƒ Π΅Π³ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ?
Preita Goy

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Π²Π΅Π±-страницы достаточно просто – всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, это ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΈ Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, какая ΠΈΠ· Π½ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Π²Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ΠΎΠΏΡ†ΠΈΡŽ ΠΈ сохраняСтС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠ°ΠΏΠΊΡƒ Π½Π° вашСм ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅. Если Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ β€” Π΄Π°, Π΄Π°ΠΆΠ΅ Π² этом простом процСссС ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСпятствия β€” ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ Π·Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ я Π½Π΅ ΠΌΠΎΠ³Ρƒ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Π²Π΅Π±-страницы.

Π Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Π΅ ссылки

Однако Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ со случаями, ΠΊΠΎΠ³Π΄Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π½Π΅ отобраТаСтся опция Β« ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Β» ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ β€” это, Π΄Ρ€ΡƒΠ·ΡŒΡ, совсСм другая история!

А Π²ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. НавСдитС Π½Π° Π½Π΅Π³ΠΎ курсор ΠΌΡ‹ΡˆΠΈ ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈβ€¦ Π’Π°Ρˆ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΏΡ€ΡΠΌΡƒΡŽ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ сохранСния изобраТСния?

ИспользованиС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π΅Π±-страницах

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π° Π²Π΅Π±-страницах двумя способами:

  • ΠΊΠ°ΠΊ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹. Π­Ρ‚ΠΎ дСлаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML-Ρ‚Π΅Π³Π° .
  • Π² качСствС Ρ„ΠΎΠ½Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов страницы ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Ρ‡Π°Ρ‰Π΅, Π²Π΅Π±-страницы Π² Ρ†Π΅Π»ΠΎΠΌ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй (CSS) для использования изобраТСния Π² качСствС Ρ„ΠΎΠ½Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ сохранСниС ΠΊΠΎΠΏΠΈΠΈ Ρ„ΠΎΠ½Π° Π²Π΅Π±-страницы ΠΈΠ»ΠΈ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ использовалось Π² качСствС Ρ„ΠΎΠ½Π° элСмСнта, являСтся Π±ΠΎΠ»Π΅Π΅ слоТной Π·Π°Π΄Π°Ρ‡Π΅ΠΉ. Π’ зависимости ΠΎΡ‚ вашСго Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ простыми ΠΈΠ»ΠΈ ΠΎΡ‡Π΅Π½ΡŒ Π·Π°ΠΏΡƒΡ‚Π°Π½Π½Ρ‹ΠΌΠΈ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ рассмотрим, ΠΊΠ°ΠΊ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Π²Π΅Π±-страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ самых популярных Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½Π° Π±Π°Π·Π΅ Windows β€” Internet Explorer, Firefox, Google Chrome, Safari ΠΈ Opera.

Π‘ΠΎΡ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° Π²Π΅Π±-страницы Ρ‡Π΅Ρ€Π΅Π· Internet Explorer β€” Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Windows ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Internet Explorer β€” это Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмС Windows, Π° Ρ‚Π°ΠΊΠΆΠ΅ самый популярный ΠΈΠ· всСх. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ являСтся Ρ„ΠΎΠ½ΠΎΠΌ Π²Π΅Π±-страницы, Π²Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ навСсти Π½Π° Π½Π΅Π³ΠΎ курсор ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠΏΡ†ΠΈΡŽ Β« Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ как… Β». ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈ быстро! Internet Explorer Ρ‚Π°ΠΊΠΆΠ΅ позволяСт ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π±ΡƒΡ„Π΅Ρ€ ΠΎΠ±ΠΌΠ΅Π½Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Β« ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ 9Β».0035 ” Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-страницы Π² Firefox

Π’ Firefox Π²Ρ‹ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ прямой ΠΎΠΏΡ†ΠΈΠΈ для сохранСния Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. ВмСсто этого Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ сначала Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Β« ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Β», Ρ‡Ρ‚ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ Π’ΠžΠ›Π¬ΠšΠž ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΎΠΊΠ½Π΅. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ТСсткий диск, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² Π΅Π³ΠΎ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Ρ€Π°Π² Β« Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ как… Β».

Google Chrome β€” сохранСниС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

ΠŸΡ€ΠΎΡ†Π΅ΡΡ сохранСния Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π² Google Chrome состоит ΠΈΠ· Π΄Π²ΡƒΡ… шагов, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ прСдоставляСт прямых ΠΎΠΏΡ†ΠΈΠΉ ΠΏΡ€ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ. Π‘Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Β« ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ элСмСнт Β»ΠΈΠ· контСкстного мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ нСбольшоС ΠΎΠΊΠ½ΠΎ с большим количСством ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹, Ссли Π²Ρ‹ Π½Π΅ Π²Π΅Π±-разработчик… Π― понимаю. Но, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π΄Ρ€Π°Π²ΠΎΠ³ΠΎ смысла, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. НапримСр, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся Ρ„ΠΎΠ½ΠΎΠΌ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ строку background-image Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ стилСй β€” см. Π½ΠΈΠΆΠ΅. НаТатиС Π½Π° Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ссылку Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π½ΠΎΠ²ΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ, послС Ρ‡Π΅Π³ΠΎ Π²Ρ‹ смоТСтС ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ способом (Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β« Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ как… β€œ.

Π‘ΠΎΡ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° изобраТСния Π²Π΅Π±-страницы Π² Safari ΠΈ Opera

Как ΠΈ Π² Google Chrome, Π² Safari ΠΈ Opera Π½Π΅Ρ‚ прямой возмоТности сохранСния Ρ„ΠΎΠ½Π° изобраТСния Π²Π΅Π±-страницы . ЕдинствСнный способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это β€” ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ исходный ΠΊΠΎΠ΄, Π½Π°ΠΉΡ‚ΠΈ URL-адрСс изобраТСния ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ для людСй, Π½Π΅ ΡΠ²Π»ΡΡŽΡ‰ΠΈΡ…ΡΡ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ, это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ слоТная ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Π°. Π’ любом случаС, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Opera ΠΈ Safari Π½Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ Windows я ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Internet Explorer (Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) для сохранСния Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *