background | htmlbook.ru
CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
3 | 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ |
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | transparent || none || repeat || scroll || 0% 0% |
---|---|
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | ΠΠ΅Ρ |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ | ΠΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ |
Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ | http://www.w3.org/TR/CSS21/colors.html#propdef-background |
ΠΠ΅ΡΡΠΈΠΈ CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π£Π½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π΄ΠΎ ΠΏΡΡΠΈ Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ ΡΠΎΠ½Π°. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
ΠΌΠΎΠ³ΡΡ ΠΈΠ΄ΡΠΈ Π² Π»ΡΠ±ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ· Π½ΠΈΡ
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ
Π½ΡΠΆΠ½ΠΎΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ. ΠΠ»Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΡ ΡΠΌΠΎΡΡΠΈΡΠ΅
ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ. Π CSS3 Π΄ΠΎΠΏΡΡΡΠΈΠΌΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠΎΠ½ΠΎΠ², ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΡ ΠΈΡ
ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
CSS2.1 | background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit |
CSS3 | background: [<ΡΠΎΠ½>, ]* <ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ_ΡΠΎΠ½> |
ΠΠ΄Π΅ΡΡ:
<ΡΠΎΠ½> = [background-attachment || background-image || background-position || background-repeat] | inherit
<ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ_ΡΠΎΠ½> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
ΠΡΠ»ΠΈ Π½Π°ΡΡΠ΄Ρ Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π·Π°Π΄Π°ΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½ΠΈΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
ΠΡΠ±ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΠΏΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΡΠ°Π·Π΄Π΅Π»ΡΠ΅ΠΌΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠΌ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΡ ΡΡΠΈΠ»Ρ ΡΠΎΠ½Π°, Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΠΈ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΡΡΠΈΡΡ. inherit Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ 1
XHTML 1.0CSS2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>background</title> <style type="text/css"> div { height: 200px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */ width: 200px; /* Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° */ overflow: auto; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ */ padding-left: 15px; /* ΠΡΡΡΡΠΏ ΠΎΡ ΡΠ΅ΠΊΡΡΠ° ΡΠ»Π΅Π²Π° */ background: url(images/hand.png) repeat-y #fc0; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π°, ΠΏΡΡΡ ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ */ } </style> </head> <body> <div> Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat. </div> </body> </html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½ΠΈΠΆΠ΅ (ΡΠΈΡ. 1).
Π ΠΈΡ. 1. ΠΠΈΠ΄ ΡΠΎΠ½Π° ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ° Π² Π±Π»ΠΎΠΊΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΡΠΈΠΌΠ΅Ρ 2
HTML5CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background</title> <style> body { background: url(images/hand.png) repeat-y, #fc0 url(images/bg-right.png) repeat-y 100% 0; } </style> </head> <body> </body> </html>
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
[window.]document.getElementById(Β«elementIDΒ»).style.background
ΠΡΠ°ΡΠ·Π΅ΡΡ
Internet Explorer Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 7.0 Π²ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ inherit.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS Background β Π’Π΅ΠΌΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΠ±Π·ΠΎΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS background ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠ²Π΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΡΠΎΠΈΡΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π², ΠΊΠΎΠ³Π΄Π° ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΡΠΎΠ½Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΡΠ²Π΅Ρ/Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΡΠΎΠ½Π° ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π²Π°Ρ Π΅ΡΡΡ Π΄Π²Π° HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° div ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ Π½ΠΈΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ.
ΠΡΠ²ΠΎΠ΄ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΊΠΎΠ΄Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ, Π³Π΄Π΅ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΎΠ½Π΅, Π° Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠ½Π΅Π³ΠΎ ΡΠ²Π΅ΡΠΎΠ².
ΠΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠ΅ 3 ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π½ΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π²ΠΎΡΡΠΌΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ²:
- background-attachment
- ΡΠΎΠ½-ΠΊΠ»ΠΈΠΏ
- ΡΠ²Π΅Ρ ΡΠΎΠ½Π°
- ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
- ΡΠΎΠ½-ΠΏΡΠΎΠΈΡΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅
- ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ
- ΠΏΠΎΠ²ΡΠΎΡ ΡΠΎΠ½Π°
- ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°
Π£ Π²Π°Ρ Π΅ΡΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π½ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ Π΄Π°Π΅Ρ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΠΈ Π²Ρ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅, Π½ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π΄ΡΡΠ³ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°Ρ ΠΈΡ , ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΡΠ²Π΅Ρ. Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠ΅ΠΉ Π²ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ².
ΠΠΎΠ³Π΄Π° ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΆΠ΅Π»ΡΡΠΉ ΡΠ²Π΅Ρ ΠΊ ΡΠΎΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΡΡΠ΅ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΆΠ΅Π»ΡΡΠΉ ΡΠ²Π΅Ρ ΠΊ ΡΠΎΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Π ΡΡΠΎ ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ½Π°.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΡΠ°Π·ΠΌΠ΅Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ, ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅.
ΠΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ»ΠΎΡΡ ΠΏΠΎ ΠΎΡΠΈ X? ΠΠ°ΡΠ΅ΠΌ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ no-repeat Π½Π° Repeat-x.
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ ΠΏΠΎ ΠΎΡΠΈ x.
ΠΠ΅Π²ΠΈΠ· ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² β Π΄ΠΎΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π³ΠΈΠ±ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΡΡΠ΅Π½ΠΎΠ³ΡΠ°ΡΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²Π΅Ρ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ.
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ½Π°:
Π€ΠΎΠ½ Π² CSS
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π€ΠΎΠ½ CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΠΎΡΡΠ°Π²Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°
Π€ΠΎΠ½ CSS β ΡΡΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ 8 ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ². Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ.
1. background-attachment :
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-attachment ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈΠ»ΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-attachment β ΡΡΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-attachment ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β ΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-attachment ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΎ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΌΠ΅ΡΡΠ΅.
Π ΡΡΠ΅ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Ρ ΡΠΎΠ½Π° Π΅ΡΡΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
2. background-clip :
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-clip ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π»ΠΈ ΠΎΠ½ Π½Π° ΡΠ°ΠΌΠΊΡ, ΠΎΡΡΡΡΠΏΡ ΠΈΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ padding-box, content-box ΠΈ border-box.
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΠ°ΡΡΠΈΡΡΠ΅Ρ Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅Ρ, ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ.
- border-box :
ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-clip ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΎΠ·Π½Π°ΡΠ°ΡΡΠ΅Π΅, ΡΡΠΎ ΡΠΎΠ½ ΠΏΡΠΎΡΡΠΈΡΠ°Π΅ΡΡΡ Π΄ΠΎ ΠΊΡΠ°Π΅Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. - padding-box :
ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΡΡΡΡΠΏΡ ΠΈ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅Ρ ΡΠΊΡΡΠ΅Π½ΡΠ° Π΄ΠΎ Π³ΡΠ°Π½ΠΈΡΡ. - content-box :
ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎ ΠΊΡΠ°Ρ Π±Π»ΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄Π΅ ΡΠΊΠ°Π·Π°Π½Ρ Π²ΡΠ΅ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΊΠΎΠ΄Π° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅, Π³Π΄Π΅ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ background-clip ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° β ΡΡΠΎ border-box, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΠΈΡΠ°Π΅ΡΡΡ Π΄ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β padding-box, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈ Π½Π΅ Π΄ΠΎΡ ΠΎΠ΄ΠΈΡ Π΄ΠΎ Π³ΡΠ°Π½ΠΈΡΡ; Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ ΡΡΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅.
Π’ΡΠ΅ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΠΏΠΎΠ»Π΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ Π½Π΅ Π΄ΠΎΡ
ΠΎΠ΄ΠΈΡΡ Π΄ΠΎ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
3. background-color :
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-color ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ΄, Π·Π½Π°ΡΠ΅Π½ΠΈΡ RGB, RGB, HSL ΠΈ HSLA.
ΠΠΎΠΏΡΡΡΠΈΠΌ, ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠ²Π΅Ρ ΠΊ ΡΠΎΠ½Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅.
ΠΠ°ΠΆΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ RGBA, ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ΄ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ HSL Π²ΠΌΠ΅ΡΡΠΎ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠ°.
4. background-image :
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS background-image ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠ½ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² Π²Π΅ΡΡ Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ Π΄Π²Π° ΡΠΈΠΏΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ: ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ :
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° URL() ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠ΅Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ Π΄Π²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π±ΠΎΠ»ΡΡΠ΅ url() Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π°ΠΏΡΡΠΎΠΉ (,).
ΠΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π²ΡΠΎΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ.
ΠΡΠ°Π΄ΠΈΠ΅Π½Ρ :
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π»ΡΠ±ΠΎΠ³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° ΠΊ ΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΠ²ΠΎΠ΄ Π²ΡΡΠ΅ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
5. background-origin :
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSS. ΠΎΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: border-box, content-box ΠΈ padding-box.
Π Π°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-clip, Π½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ background-clip ΠΎΠ±ΡΠ΅Π·Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΠΎΡΡ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ°, Π° background-origin Π²ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΡ Π±Π»ΠΎΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΠΎΡΡ.
6. background-position :
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΏΠΎ ΠΎΡΠΈ X ΠΈΠ»ΠΈ ΠΎΡΠΈ Y ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΈ ββΠ΄Π»ΠΈΠ½Π΅.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π²Π΅ΡΡ ΠΈ Π½ΠΈΠ·, ΡΡΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌΡ ΠΈΠ»ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎ ΠΎΡΠΈ Y, ΠΈ Π»Π΅Π²ΠΎΠΌΡ, ΠΏΡΠ°Π²ΠΎΠΌΡ, ΡΡΠΎ ΡΠ°Π²Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌΡ ΠΈΠ»ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎ ΠΎΡΠΈ X.
Π¦Π΅Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° ΡΠ΅Π½ΡΡΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
7. background-repeat :
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-repeat ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ ΠΈΠ»ΠΈ Π½Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π΄ΠΎΠ»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠ΅ΠΉ.
Π£ Π²Π°Ρ Π΅ΡΡΡ ΡΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠ²ΡΠΎΡ, ΠΏΠΎΠ²ΡΠΎΡ-x, ΠΏΠΎΠ²ΡΠΎΡ-y ΠΈ ΠΏΠΎΠ²ΡΠΎΡ-ΠΈ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ ΠΏΠΎ ΠΎΠ±Π΅ΠΈΠΌ ΠΎΡΡΠΌ. repat-y ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΡΠΈ Y. repat-x ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΡΠΈ x. Π ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ Π³ΠΎΠ²ΠΎΡΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ.
ΠΡΠ²ΠΎΠ΄ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΊΠΎΠ΄Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅.
8. Background-size :
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ background-size , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠΌ ΠΈ Π·Π°ΠΏΡΡΠ°Π½Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Π°ΡΠΈΠ°ΡΠΈΠΉ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΎΠ±Π»ΠΎΠΆΠΊΠ° ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»ΠΈΠ½Ρ.
ΠΠ±Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°:
ΠΠ±Π»ΠΎΠΆΠΊΠ°:
ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡ Π²Π΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ.
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΡ :
ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ, Π±Π΅Π· Π΅Π³ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ.
ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»ΠΈΠ½Ρ Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ Ρ ΠΎΠ΄Π½ΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ Ρ Π΄Π²ΡΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ.
Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΠΊ Π²ΡΡΠΎΡΠ΅, ΡΠ°ΠΊ ΠΈ ΠΊ ΡΠΈΡΠΈΠ½Π΅, Π° ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠΈΡΠΈΠ½Π΅, Π° Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β ΠΊ Π²ΡΡΠΎΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²Π΅ΡΠ° ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ°, ΠΈ Π²Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π° CSS Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° (ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠΌΡ ΡΠ²Π΅ΡΠ°, ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ΄, RGB ΠΈΠ»ΠΈ hsla). ΠΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ°.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π½Π°Ρ Π΅ΡΡΡ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ div, ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π·ΠΎΠ»ΠΎΡΠΎΠΉ ΡΠ²Π΅Ρ ΠΊ Π΅Π³ΠΎ ΡΠΎΠ½Ρ.
ΠΠΎΠ³Π΄Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ div, ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΎΠ½Π° Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π², ΠΊΠΎΠ³Π΄Π° ΠΌΡ Ρ
ΠΎΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ Π·Π΄Π΅ΡΡ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ URL ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ±Π°ΠΊΠΈ Π² Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΈ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΎΠ½ΠΎΠ²
Π ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS3 Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ββΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΎΠ½ΠΎΠ², Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»ΠΎΠ΅Π² ΡΠΎΠ½Π°. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ², Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ², ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ Π·Π°ΠΏΡΡΡΠΌΠΈ.
ΠΠΎΠ³Π΄Π° ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠΈΡΠΊΠ°, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΡΡΠΌΠΈ, ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β ΡΡΠΎ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠ»ΠΎΠΉ, Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β Π²ΡΠΎΡΠΎΠΉ ΡΠ»ΠΎΠΉ, Π° ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π²ΡΠ΅Π³Π΄Π° β ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ»ΠΎΠΉ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΊΠΎΠ΄Π΅ ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π΄Π²Π° ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ½Π°, Π΄ΠΎΠΊΠ°Π·ΡΠ²Π°Ρ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ² Π² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π° CSS.
ΠΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° Π²Π΅ΡΡ
Π½Π΅ΠΌ ΡΠ»ΠΎΠ΅, Π° Π²ΡΠΎΡΠΎΠ΅ β Π½Π° Π²ΡΠΎΡΠΎΠΌ; ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ. ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠΎΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ, Π° ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ. Π Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»ΠΎΠΆΠ΅Π½ΠΎ ΡΠΎ Π²ΡΠΎΡΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΡΠΎΠ±Π»Π΅ΠΌΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ
ΠΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ . ΠΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° Π½Π΅ ΠΎΠ±ΡΡΠ²Π»ΡΠ΅Ρ ΠΎ ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΈΠΈ ΠΈ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ ΡΠ²ΠΎΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π²Π°ΠΆΠ½ΡΡ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΉ ΡΠ΅Π»ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·ΡΠΌΠ½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΡ Π΅Π΅ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΡΡΡ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ ΡΠΎΠ½Π° CSS, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ:
- ΠΡΠ³Π» Π₯ΡΠΎΠΌ,
- Internet Explorer,
- Π€Π°Π΅ΡΡΠΎΠΊΡ,
- ΠΠΏΠ΅ΡΠ° ΠΈ
- Π‘Π°ΡΠ°ΡΠΈ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
- Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π° CSS ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ²:
- ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ»ΠΈΠΏΡΠ°,
- ΡΠ²Π΅Ρ ΡΠΎΠ½Π°,
- ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅,
- ΡΠΎΠ½-ΠΏΡΠΎΠΈΡΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅,
- ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ,
- ΠΏΠΎΠ²ΡΠΎΡ ΡΠΎΠ½Π°,
- ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° ΠΈ
- background-attachment.
- ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π²ΡΠ΅ Π²ΠΎΡΠ΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Π°ΡΠΈΠ°ΡΠΈΠΉ Π΅Π³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°.
- Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ² Π΄Π»Ρ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π²Π°ΡΠΈ ΡΠΎΡΠΌΡ
Π₯ΠΎΡΠΈΡΠ΅ Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π²Π°ΡΠΈ ΡΠΎΡΠΌΡ? Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΎΡΠΎΡΠΌΠΈΡΡ ΡΠΎΡΠΌΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π°!
ΠΠ· ΡΡΠΎΠ³ΠΎ ΡΡΡΠΎΡΠΈΠ°Π»Π° Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΡΠΌΡ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅
- 1. ΠΡΠ±ΠΎΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- 2. ΠΡΠ±ΠΎΡ ΡΠΎΡΠΌΡ
- 3. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΡ
1. ΠΡΠ±ΠΎΡ Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΡΠΎΡΠΌΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΡΠ²ΠΎΠ΅ΠΉ ΠΌΠ΅Π΄ΠΈΠ°ΡΠ΅ΠΊΠΈ ΠΈΠ»ΠΈ ΠΈΠ· Π»ΡΠ±ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ° Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π΅ΡΡΡ Π΄ΠΎΡΡΡΠΏ Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
Π§ΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ
ΠΠ»Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΄ΠΎΠ±ΠΎΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΡΡΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΡΠ°ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π»ΡΠ±ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ Π² ΡΠΎΡΠΌΠ΅.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠ»ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΡΠ²Π΅ΡΠ»ΠΎΠΌ ΡΠΎΠ½Π΅. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ Π½Π° ΡΠ²Π΅ΡΠ»ΠΎΠΌ ΡΠΎΠ½Π΅ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΡΠΉ ΡΠ΅ΠΊΡΡ Π½Π° ΡΠ΅ΠΌΠ½ΠΎΠΌ ΡΠΎΠ½Π΅.
2. ΠΡΠ±ΠΎΡ ΡΠΎΡΠΌΡ
ΠΠ°ΡΠ΅ΠΌ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠΎΡΠΌΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΎΡΠΈΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ. ΠΡΠ»ΠΈ Π²Ρ Π΅ΡΠ΅ Π½Π΅ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠΎΡΠΌΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π½ΠΎΠ²ΡΡ ΡΠΎΡΠΌΡ, Π½Π°ΠΆΠ°Π² WPForms Β»ΠΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΡ .
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ².
ΠΡΠ»ΠΈ Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π²Π°ΡΠΈΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ, Π²Ρ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ Π² ΠΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅ ΡΠΎΡΠΌ.
3. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΡ
Π ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅ ΡΠΎΡΠΌ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ Β» ΠΠ±ΡΠΈΠ΅ Β» ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ .
ΠΡΡΡΠ΄Π° Π²Π²Π΅Π΄ΠΈΡΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° Π² ΠΏΠΎΠ»Π΅ ΠΠ»Π°ΡΡ CSS ΡΠΎΡΠΌΡ. ΠΠ΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΈΠΌΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠ»Π°ΡΡΠ°, Π½ΠΎ ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ
wpf-
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠ΅ΡΠΈΠΊΡΠ°. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π²Π°ΡΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ CSS ΠΈ Π»ΡΠ±ΡΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΠΈΠ½Π°ΠΉΡΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° Ρ Π±ΡΠΊΠ²Ρ. Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² Π² CSS ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½Ρ ΠΊ ΡΠ΅Π³ΠΈΡΡΡΡ. ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ ΠΏΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π² WPForms.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΡΠ²ΠΎΠ΅ΠΉ ΠΌΠ΅Π΄ΠΈΠ°ΡΠ΅ΠΊΠΈ, Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ»Π½ΡΠΉ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΎ, ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΠΠ΅Π΄ΠΈΠ° Β» ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°.
ΠΠ΄Π΅ΡΡ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
Π ΠΎΡΠΊΡΡΠ²ΡΠ΅ΠΌΡΡ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ URL Π² Π±ΡΡΠ΅Ρ ΠΎΠ±ΠΌΠ΅Π½Π° .
URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ Π² Π±ΡΡΠ΅Ρ ΠΎΠ±ΠΌΠ΅Π½Π°.
Π‘Π΄Π΅Π»Π°Π² ΡΡΠΎ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Β» ΠΠ°ΡΡΡΠΎΠΈΡΡ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ CSS.
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ background-image
ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ URL-Π°Π΄ΡΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΠ°Π½Π΅Π΅.
ΠΠΈΠΆΠ΅ ΠΌΡ Π½Π°ΠΏΠΈΡΠ°Π»ΠΈ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°. ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ /path/wpforms-backdrop.png
ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΌ URL-Π°Π΄ΡΠ΅ΡΠΎΠΌ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
.wpf-ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠΎΠ½ { ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: url(/path/wpforms-backdrop.png) !Π²Π°ΠΆΠ½ΠΎ; ΠΎΡΡΡΡΠΏ: 15px 35px !Π²Π°ΠΆΠ½ΠΎ; /*ΠΠ°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ, Π½ΠΎ ΡΠ»ΡΡΡΠ°Π΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π²Π°ΡΠ΅ΠΉ ΡΠΎΡΠΌΠ΅.*/ }
ΠΠ°ΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ.
Π£Π±Π΅Π΄ΠΈΠ²ΡΠΈΡΡ, ΡΡΠΎ ΠΊΠΎΠ΄ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ, Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ , ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.
ΠΡΠ»ΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ Π½Π΅Ρ ΠΎΡΠΈΠ±ΠΎΠΊ, Π²Π°ΡΠ° ΡΠΎΡΠΌΠ° ΡΠ΅ΠΏΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΡΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΊΠΎΠ΄Π°:
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈ ΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π²Π°ΡΠΈΠΌΠΈ ΡΠΎΡΠΌΠ°ΠΌΠΈ. ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΡΠΈΡΠΎΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ²Π΅ΡΠΎΠ².
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· Π²Π°ΡΠ΅ΠΉ ΠΌΠ΅Π΄ΠΈΠ°ΡΠ΅ΠΊΠΈ ΠΈΠ»ΠΈ Π³Π΄Π΅-Π»ΠΈΠ±ΠΎ Π΅ΡΠ΅ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. ΠΡΠΎ Π΄Π°Π΅Ρ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΎΠ²ΡΡΠ΅Π½Π½ΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΠΈ. ΠΠ°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΡΡΡ ΠΎ ΠΏΡΠΎΠΏΠ°ΠΆΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π CSS Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΡΡΠΈ Π²ΠΈΠ΄Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ²:
-
conic-gradient()
-
Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ()
-
ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ()
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° Π΄Π»Ρ Π²Π°ΡΠ΅ΠΉ ΡΠΎΡΠΌΡ. ΠΡΠΎΡΡΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΠΊΠ»Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈ ΡΠ°Π½ΡΡΠ΅, Π½ΠΎ Π²ΠΌΠ΅ΡΡΠΎ URL-Π°Π΄ΡΠ΅ΡΠ° ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ CSS 9.0406 Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ() .
Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅:
.wpf-custom-background { background-image: linear-gradient(#0299ed, #FFFFFF) !Π²Π°ΠΆΠ½ΠΎ; /*ΠΠ°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎ Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ*/ ΠΎΡΡΡΡΠΏ: 15px 35px !Π²Π°ΠΆΠ½ΠΎ; }
ΠΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΡΠ³ΠΊΠΈΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΎΡ ΡΠΈΠ½Π΅Π³ΠΎ ΠΊ Π±Π΅Π»ΠΎΠΌΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π°ΡΠ΅ΠΉ ΡΠΎΡΠΌΡ:
ΠΠΎΡ ΠΈ Π²ΡΠ΅! Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ²ΠΎΠΈ ΡΠΎΡΠΌΡ Π² WPForms.