Π Π°Π·Π½ΠΎΠ΅

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Π² css: Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок Π² css

28.07.2023

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

background | htmlbook.ru

CSSInternet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.16.0+8.0+1.0+3.5+1.0+1.0+2.1+1.0+
39.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 1CSS 2CSS 2.1CSS 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 ΡΠΎΠ·Π΄Π°ΡŽΡ‚ эффСкт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ β€” это ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°, которая являСтся ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ свойства 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.

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

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