Div Ρ„ΠΎΠ½ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°: background-image | htmlbook.ru

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

background-size | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.5+3.0+3.6+2.1+1.0+

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ информация

ВСрсии CSS

ОписаниС

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ согласно Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ.

Бинтаксис

background-size: [ <Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅> | <ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹> | auto ]{1,2} | cover | contain

ЗначСния

<Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅>
Π—Π°Π΄Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² Π»ΡŽΠ±Ρ‹Ρ… доступных для CSS Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ…Β β€” пиксСлы (px), сантимСтры (cm), em ΠΈ Π΄Ρ€.
<ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹>
Π—Π°Π΄Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ высоты элСмСнта.
auto
Если Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ для ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты (auto auto), Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„ΠΎΠ½Π° ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ исходными; Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠ΄Π½ΠΎΠΉ стороны ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (100px auto), Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ вычисляСтся автоматичСски исходя ΠΈΠ· ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.
cover
ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с сохранСниСм ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈΠ»ΠΈ высота Ρ€Π°Π²Π½ΡΠ»Π°ΡΡŒ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈΠ»ΠΈ высотС Π±Π»ΠΎΠΊΠ°.
contain
ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с сохранСниСм ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»Π°ΡΡŒ Π²Π½ΡƒΡ‚Ρ€ΡŒ Π±Π»ΠΎΠΊΠ°.

Если установлСно ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ Π·Π°Π΄Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ„ΠΎΠ½Π°, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ принимаСтся Π·Π° auto. ΠŸΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΡ€ΠΈ этом ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ. ИспользованиС Π΄Π²ΡƒΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π» Π·Π°Π΄Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-size</title>
  <style>
   div {
    height: 200px; /* Высота Π±Π»ΠΎΠΊΠ° */
    border: 2px solid #000; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ */
    background: url(images/mybg.png) 100% 100% no-repeat; /* ДобавляСм Ρ„ΠΎΠ½ */
    background-size: cover; /* ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌ Ρ„ΠΎΠ½ */
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

Safari Π΄ΠΎ вСрсии 4.1 ΠΈ Chrome Π΄ΠΎ вСрсии 3.0 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ нСстандартноС свойство -webkit-background-size.

Opera Π΄ΠΎ вСрсии 10.53 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ нСстандартноС свойство -o-background-size.

Firefox Π΄ΠΎ вСрсии 4.0 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ нСстандартноС свойство -moz-background-size.

Html div background image — Вэб-ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΠ° для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚Π΅Π»Π΅ΠΉ!

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

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

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства background ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ†Π²Π΅Ρ‚, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ΅ΠΌΠΎΡΡ‚ΡŒ ΠΈ привязку Ρ„ΠΎΠ½Π°, ΠΊΠ°ΠΊ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ для всСго сайта, Ρ‡Ρ‚ΠΎ ΠΏΠΎ своСй сути, кстати, являСтся Π·Π°Π΄Π°Π½ΠΈΠ΅ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… настроСк для Ρ‚Π΅Π³Π° . Рассмотрим всС свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ связаны с Π·Π°Π΄Π°Π½ΠΈΠ΅ΠΌ Ρ„ΠΎΠ½Π°.

background-color

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

, Ρ‚Π°ΠΊ ΠΈ ΠΊΠΎ всСму Π²Π΅Π±-сайту с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° .

background-image

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

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

background-repeat

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

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

  • background-repeat: repeat-x β€” ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ;
  • background-repeat: repeat-y β€” ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ;
  • background-repeat: repeat β€” ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ;
  • background-repeat: no-repeat β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ повторяСтся.

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

background-attachment

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

  • background-attachment: scroll β€” Ρ„ΠΎΠ½ прокручиваСтся вмСстС со страницСй;
  • background-attachment: fixed β€” Ρ„ΠΎΠ½ остаётся Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½Ρ‹ΠΌ.

background-position

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

Бвойство ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅, Π² пиксСлях, сантимСтрах ΠΈΠ»ΠΈ словСсно: top, bottom, center, right, left .

  • background-position: 50% 20% β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ располагаСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π½Π° 20% отступаСт свСрху;
  • background-position: 80px 60px β€” отступ изобраТСния Π²Π½ΠΈΠ· Π½Π° 80 пиксСлСй ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края ΠΈ Π½Π° 60 пиксСлСй Π²ΠΏΡ€Π°Π²ΠΎ ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ:

gradient

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

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


ВсС ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹Π΅ настройки ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² ΠΎΠ΄Π½ΠΎΠΌ свойствС background, записав ΠΈΡ… Π² пСрСчислСнном порядкС.

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

Π Π°Π±ΠΎΡ‚Π° с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Ρ„ΠΎΠ½Π° Π² 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 β€” ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ задания ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°:


НадССмся, Ρ‡Ρ‚ΠΎ Π΄Π°Π½Π½ΠΎΠ΅ руководство Π²Π°ΠΌ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ, ΠΈ ΠΆΠ΅Π»Π°Π΅ΠΌ успСхов Π² освоСнии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°!

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ html-элСмСнта ΠΈΠΌΠ΅Π΅Ρ‚ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ слой, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) ΠΈΠ»ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ/ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ нСсколькими изобраТСниями. CSS-свойства Ρ„ΠΎΠ½Π° ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, ΠΊΠ°ΠΊΠΎΠΉ Ρ†Π²Π΅Ρ‚ background-color ΠΈ изобраТСния background-image ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€, располоТСниС, способ ΡƒΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ Ρ‚.Π΄.

Бвойства Ρ„ΠΎΠ½Π° Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ΡΡ, Π½ΠΎ Ρ„ΠΎΠ½ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡΠ²Π΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΠ·-Π·Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния Π² background-color: transparent .

Π€ΠΎΠ½ Π½Π΅ отобраТаСтся Ρƒ пустых элСмСнтов с Π½ΡƒΠ»Π΅Π²ΠΎΠΉ высотой. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния свойства margin Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° Ρ„ΠΎΠ½ элСмСнта.

Бвойства Ρ„ΠΎΠ½Π° html-элСмСнтов

  • Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅:
  • 1. Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚: свойство background-color
  • 2. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния: свойство background-image
  • 3. Π£ΠΊΠ»Π°Π΄ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ: свойство background-repeat
  • 4. Ѐиксация изобраТСния: свойство background-attachment
  • 5. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ: свойство background-position
  • 6. ΠžΠ±Π»Π°ΡΡ‚ΡŒ рисования: свойство background-clip
  • 7. ΠžΠ±Π»Π°ΡΡ‚ΡŒ располоТСния Ρ„ΠΎΠ½Π°: свойство background-origin
  • 8. Π Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ: свойство background-size
  • 9. ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ запись свойств Ρ„ΠΎΠ½Π°: свойство background
  • 10. ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅ Ρ„ΠΎΠ½Ρ‹

1. Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚: свойство background-color

Бвойство background-color устанавливаСт Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° элСмСнта. Π¦Π²Π΅Ρ‚ рисуСтся Π·Π° Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями. Для Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° распространяСтся Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту Π±Π»ΠΎΠΊΠ° элСмСнта, для строчных β€” Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΈΡ… содСрТимого.

Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° обрСзаСтся Π² соотвСтствии со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ background-clip самого Π½ΠΈΠΆΠ½Π΅Π³ΠΎ слоя Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

Бвойство Π½Π΅ наслСдуСтся.

background-color
ЗначСния:
Ρ†Π²Π΅Ρ‚Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ всС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ†Π²Π΅Ρ‚Π° свойства color. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ transparent .
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Рис. 1. Бвойство background-color для Ρ€Π°Π·Π½Ρ‹Ρ… элСмСнтов

2. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния: свойство background-image

Бвойство background-image устанавливаСт Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ нСсколько) элСмСнта. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ none считаСтся слоСм изобраТСния, Π½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ рисуСт. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ являСтся пустым (Π½ΡƒΠ»Π΅Π²ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ Π½ΡƒΠ»Π΅Π²ΠΎΠΉ высоты), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ загруТаСтся ΠΈΠ»ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΎ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π½Π΅ Π² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ изобраТСния) Ρ‚Π°ΠΊΠΆΠ΅ считаСтся слоСм, Π½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ рисуСт.

БСмантичСски Π²Π°ΠΆΠ½Ρ‹Π΅ изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒΡΡ Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, с Ρ‚Π΅Π³ΠΎΠΌ .

Бвойство Π½Π΅ наслСдуСтся.

background-image
ЗначСния:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠžΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ 2D-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ссылка Π½Π° URL, нотация image() ΠΈΠ»ΠΈ запись Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ none .
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

3. Π£ΠΊΠ»Π°Π΄ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ: свойство background-repeat

Бвойство background-repeat опрСдСляСт, ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΡƒΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² области Ρ„ΠΎΠ½Π° послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ для Π½ΠΈΡ… установлСны Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слова, ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ направлСния, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ β€” для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ.

Бвойство Π½Π΅ наслСдуСтся.

background-repeat
ЗначСния:
repeat-xΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ. ВычисляСтся Π² repeat no-repeat .
repeat-yΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся Π² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ. ВычисляСтся Π² no-repeat repeat .
repeatΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся Π² ΠΎΠ±ΠΎΠΈΡ… направлСниях Ρ‚Π°ΠΊ часто, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ отрисовки Ρ„ΠΎΠ½Π°. Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ помСщаСтся, ΠΎΠ½ΠΎ обрСзаСтся. ВычисляСтся Π² repeat repeat . Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
spaceΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·, сколько ΠΎΠ½ΠΎ помСщаСтся Π² области Ρ„ΠΎΠ½Π°, Π½Π΅ ΠΎΠ±Ρ€Π΅Π·Π°ΡΡΡŒ, изобраТСния располоТСны Π½Π° Ρ€Π°Π²Π½ΠΎΠΌ расстоянии Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ ΠΈ послСднСС изобраТСния ΠΊΠ°ΡΠ°ΡŽΡ‚ΡΡ ΠΊΡ€Π°Π΅Π² области. Если ΠΎΠ±Π»Π°ΡΡ‚ΡŒ рисования Ρ„ΠΎΠ½Π° большС, Ρ‡Π΅ΠΌ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ позиционирования Ρ„ΠΎΠ½Π°, шаблон повторяСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ рисования Ρ„ΠΎΠ½Π°. Если нСдостаточно мСста для Π΄Π²ΡƒΡ… ΠΊΠΎΠΏΠΈΠΉ изобраТСния, Ρ‚ΠΎ размСщаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° свойство background-position опрСдСляСт Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ВычисляСтся Π² space space .
roundΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся Ρ‚Π°ΠΊ часто, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Ρ„ΠΎΠ½Π°, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡΡΡŒ ΠΈ Π½Π΅ ΠΎΠ±Ρ€Π΅Π·Π°ΡΡΡŒ. ВычисляСтся Π² round round .
no-repeatΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ размСщаСтся ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΠΈ Π½Π΅ повторяСтся. ВычисляСтся Π² no-repeat no-repea t.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Рис. 2. Бвойство background-repeat

4. Ѐиксация изобраТСния: свойство background-attachment

Бвойство background-attachment ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, являСтся Π»ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ фиксированными ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра ΠΈΠ»ΠΈ прокручиваСтся вмСстС с элСмСнтом ΠΈΠ»ΠΈ Π΅Π³ΠΎ содСрТимым.

Бвойство Π½Π΅ наслСдуСтся.

background-attachment
ЗначСния:
scrollΠ€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прокручиваСтся вмСстС с тСкстом ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ содСрТимым. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
fixedΠŸΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅, фиксируСт Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.
localΠ€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прокручиваСтся вмСстС с содСрТимым элСмСнта.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

5. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ: свойство background-position

Если для элСмСнта Π·Π°Π΄Π°Π½Ρ‹ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния, свойство background-position ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΈΡ… Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (послС любого измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π°) Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ области располоТСния Ρ„ΠΎΠ½Π°.

Бвойство Π½Π΅ наслСдуСтся.

background-position
ЗначСния:
%Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС вычисляСтся ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΡƒΠ»Π΅ ΡˆΠΈΡ€ΠΈΠ½Π° области располоТСния Ρ„ΠΎΠ½Π° β€” ΡˆΠΈΡ€ΠΈΠ½Π° Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΡƒΠ»Π΅ высота области располоТСния Ρ„ΠΎΠ½Π° β€” высота Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния , Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния β€” это Ρ€Π°Π·ΠΌΠ΅Ρ€, Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ свойством background-size . Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0% 0% .
Π΄Π»ΠΈΠ½Π°Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄Π»ΠΈΠ½Ρ‹ Π΄Π°Π΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π΄Π»ΠΈΠ½Ρƒ Π² качСствС смСщСния.
leftВычисляСт Π΄ΠΎ 0% для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, Ссли Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π΄Π²Π° значСния, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС смСщСниС происходит ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края.
centerВычисляСт Π² left 50% для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния, Ссли Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ top 50% для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния, Ссли ΠΎΠ½ΠΎ Π·Π°Π΄Π°Π½ΠΎ.
rightВычисляСт Π² 100% для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния, Ссли Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π΄Π²Π° значСния, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС смСщСниС происходит ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края.
topВычисляСт Π² 0% для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, Ссли Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π΄Π²Π° значСния, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС смСщСниС происходит ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края.
bottomВычисляСт Π² 100% для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, Ссли Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π΄Π²Π° значСния, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС смСщСниС происходит ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Если ΡƒΠΊΠ°Π·Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ считаСтся center . Если Π·Π°Π΄Π°Π½Ρ‹ Π΄Π²Π° значСния Π² Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… Π΄Π»ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ % , Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ значСния прСдставляСт Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ β€” Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ. ЗначСния Π² Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… Π΄Π»ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ % ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ смСщСниС Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° области располоТСния Ρ„ΠΎΠ½Π°.

ΠŸΠ°Ρ€Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ пСрСупорядочСна, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ комбинация ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова ΠΈ Π΄Π»ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚. НапримСр, center left β€” допустимоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π° 50% left β€” Π½Π΅Ρ‚.

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

ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΡΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Π²Π½ΡƒΡ‚Ρ€ΡŒ ΠΎΡ‚ края области располоТСния Ρ„ΠΎΠ½Π°. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΡΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Π½Π°Ρ€ΡƒΠΆΡƒ ΠΎΡ‚ края области располоТСния Ρ„ΠΎΠ½Π°.

Рис. 3. Бвойство background-position

МоТно Π·Π°Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Π»Π°ΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π½ΠΈΠ·Ρƒ Π±Π»ΠΎΠΊΠ°:

Рис. 4. Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π½ΠΈΠ·Ρƒ Π±Π»ΠΎΠΊΠ°

Π’Π°ΠΊΠΆΠ΅ благодаря свойству позиционирования, для ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:

Рис. 5. Π—Π°Π΄Π°Π½ΠΈΠ΅ для Π±Π»ΠΎΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

6. ΠžΠ±Π»Π°ΡΡ‚ΡŒ рисования: свойство background-clip

Бвойство background-clip опрСдСляСт ΠΎΠ±Π»Π°ΡΡ‚ΡŒ рисования Ρ„ΠΎΠ½Π°. Π€ΠΎΠ½ всСгда рисуСтся ΠΏΠΎΠ΄ Ρ€Π°ΠΌΠΊΠΎΠΉ элСмСнта, Ссли таковая имССтся.

ΠšΠΎΡ€Π½Π΅Π²ΠΎΠΉ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ рисования Ρ„ΠΎΠ½Π°, поэтому свойство background-clip Π½Π° Π½Π΅Π³ΠΎ Π½Π΅ влияСт.

Бвойство Π½Π΅ наслСдуСтся.

background-clip
ЗначСния:
border-boxΠ€ΠΎΠ½ Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Ρ€Π°ΠΌΠΊΠΈ элСмСнта. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
padding-boxΠ€ΠΎΠ½ Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΏΠΎΠ»Π΅ΠΉ элСмСнта.
content-boxΠ€ΠΎΠ½ Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Рис. 6. Бвойство background-clip

7. ΠžΠ±Π»Π°ΡΡ‚ΡŒ располоТСния Ρ„ΠΎΠ½Π°: свойство background-origin

Бвойство background-origin ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ располоТСния Ρ„ΠΎΠ½Π° для элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ выводятся Π½Π° экранС ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π΅ Π°Π±Π·Π°Ρ†Ρ‹ тСкста).

Бвойство Π½Π΅ наслСдуСтся.

background-origin
ЗначСния:
padding-boxΠ€ΠΎΠ½ позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΡ… Π³Ρ€Π°Π½ΠΈΡ† области Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΏΠΎΠ»Π΅ΠΉ элСмСнта. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
border-boxΠ€ΠΎΠ½ позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΡ… Π³Ρ€Π°Π½ΠΈΡ† Ρ€Π°ΠΌΠΊΠΈ элСмСнта.
content-boxΠ€ΠΎΠ½ позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΡ… Π³Ρ€Π°Π½ΠΈΡ† области содСрТимого элСмСнта.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Если для элСмСнта установлСно background-attachment: fixed , свойство Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ эффСкта.

Если для элСмСнта Π·Π°Π΄Π°Π½Ρ‹ background-clip: padding-box , background-origin: border-box , background-position: top left , ΠΈ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅Π½ΡƒΠ»Π΅Π²ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ, Ρ‚ΠΎΠ³Π΄Π° вСрхняя ΠΈ лСвая части Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·Π°Π½Ρ‹.

Рис. 7. Бвойство background-origin

8. Π Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ: свойство background-size

Бвойство background-size устанавливаСт Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Бвойство Π½Π΅ наслСдуСтся.

background-size
ЗначСния:
autoΠ—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния Ρ€Π°Π²Π½Ρ‹ Π΅Π³ΠΎ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ.
Π΄Π»ΠΈΠ½Π°Π Π°Π·ΠΌΠ΅Ρ€ задаСтся ΠΏΠ°Ρ€ΠΎΠΉ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ устанавливаСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ изобраТСния, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ β€” высоту. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ„ΠΎΠ½ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π»ΡΡ вмСстС с тСкстом, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π² em .
%Π—Π°Π΄Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ высоты элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ заполняСтся Ρ„ΠΎΠ½ΠΎΠΌ.
coverΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с сохранСниСм ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈΠ»ΠΈ высота Ρ€Π°Π²Π½ΡΠ»Π°ΡΡŒ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈΠ»ΠΈ высотС Π±Π»ΠΎΠΊΠ°.
containΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с сохранСниСм ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΎΡΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ°.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Рис. 8. Бвойство background-size

9. ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ запись свойств Ρ„ΠΎΠ½Π°: свойство background

Бвойство background позволяСт ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства Ρ„ΠΎΠ½Π°: background-color , background-image , background-position , background-size , background-repeat , background-origin , background-clip ΠΈ background-attachment . ΠΠ΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ всС пСрСчислСнныС свойства, Ссли ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ свойство Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΏΡƒΡ‰Π΅Π½ΠΎ, ΠΎΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Если Π²Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Π² ΠΊΡ€Π°Ρ‚ΠΊΠΎΠΉ записи Ρ„ΠΎΠ½Π° свойство background-size , Ρ‚ΠΎ Π΅Π³ΠΎ значСния Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· слСш / , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚ свойства background-position .

10. ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅ Ρ„ΠΎΠ½Ρ‹

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

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² спискС β€” это слой, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ блиТайший ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ отрисовываСтся Π·Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ, ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Ссли ΠΎΠ½ Π΅ΡΡ‚ΡŒ, Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ ΠΏΠΎΠ΄ всСми ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ слоями.

Рис. 9. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я Ρ…ΠΎΡ‡Ρƒ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚Ρ€Π΅Ρ… способах размСщСния изобраТСния Π² качСствС Ρ„ΠΎΠ½Π° всСй страницы ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ HTML + CSS (Π±Π΅Π· использования JS).

Π˜Ρ‚Π°ΠΊ, трСбования ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Ρƒ нас ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅:

  • ΠŸΠΎΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ΡΡ 100% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты страницы
  • Π€ΠΎΠ½ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈ нСобходимости (background растягиваСтся ΠΈΠ»ΠΈ сТимаСтся Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана)
  • Π‘ΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (aspect ratio)
  • Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ Π½Π° страницС
  • Π€ΠΎΠ½ Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ скроллов
  • РСшСниС максимально кроссбраузСрноС
  • НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΊΡ€ΠΎΠΌΠ΅ CSS

Бпособ 1

На ΠΌΠΎΠΉ взгляд, это Π»ΡƒΡ‡ΡˆΠΈΠΉ способ, вСдь ΠΎΠ½ самый простой, Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½Ρ‹ΠΉ ΠΈ соврСмСнный. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ свойство CSS3 background-size , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ примСняСм ΠΊ Ρ‚Π΅Π³Ρƒ html . ИмСнно html , Π° Π½Π΅ body , Ρ‚.ΠΊ. Π΅Π³ΠΎ высота большС ΠΈΠ»ΠΈ Ρ€Π°Π²Π½Π° высотС ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

УстанавливаСм фиксированный ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ„ΠΎΠ½, Π·Π°Ρ‚Π΅ΠΌ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ background-size: cover .

Π­Ρ‚ΠΎΡ‚ способ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²

Chrome (любая вСрсия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Бпособ 2

Π’ случаС Ссли ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠΊΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ мСньшС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ изобраТСния, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ media query для выравнивания бэкграунда ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π­Ρ‚ΠΎΡ‚ способ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²:

  • Π›ΡŽΠ±ΠΎΠΉ вСрсии Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² (Chrome, Opera, Firefox, Safari)
  • IE 9+

Бпособ 3

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ способ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ: фиксируСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΡƒΠ³Π»Ρƒ страницы ΠΈ растягиваСм Π΅Π³ΠΎ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ свойств min-width ΠΈ min-height 100%, сохраняя ΠΏΡ€ΠΈ этом ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон.

ΠŸΡ€Π°Π²Π΄Π° ΠΏΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π΅ цСнтрируСтся. Но эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ Π·Π°Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π²

Π­Ρ‚ΠΎΡ‚ способ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ IE 8+.

НадСюсь, эта информация Π±ΡƒΠ΄Π΅Ρ‚ для Вас ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ. Π›ΠΈΡ‡Π½ΠΎ я Ρ‡Π°ΡΡ‚Π΅Π½ΡŒΠΊΠΎ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒ этими ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ, особСнно ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ. НавСрняка Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ способы ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS. Если Π’Ρ‹ ΠΎ Π½ΠΈΡ… Π·Π½Π°Π΅Ρ‚Π΅, ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ, поТалуйста, коммСнтариях.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΊ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΡŽ

ΠΠ΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ΡΡ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ-заставки Π½Π° CSS β€” CSS-LIVE

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Flexible CSS cover images с сайта nicolasgallagher.com, c Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π°Π²Ρ‚ΠΎΡ€Π° β€” Николаса Π“Π°Π»Π°Ρ…Π΅Ρ€Π°.

НСдавно я ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠ» ΠΊ своим постам Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ добавлСния Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ-заставок, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π²Ρ‹ΡˆΠ΅. Π˜ΡΡ…ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Ρ€Π΅Π·Π°Π½ΠΎ, ΠΈ Π΄ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ максимального Ρ€Π°Π·ΠΌΠ΅Ρ€Π° отобраТаСтся Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ описываСтся рСализация этого способа.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: Chrome, Firefox, Safari, Opera, IE 9+

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ

Бпособ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ-заставки ΠΈ измСняСт ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ΅:

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ-заставки Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠΌΠ΅Ρ‚ΡŒ:

  • ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ фиксированноС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон, Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΈΡ… ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ΅Π½Ρ‹;
  • ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ;
  • ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ свойства max-height ΠΈ max-width;
  • ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ;
  • ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ заполняло ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, Π»ΠΈΠ±ΠΎ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π»ΠΎΡΡŒ Π² Π½Π΅ΠΌ;
  • Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅;

Π‘ΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон

Π‘ΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон пустого, Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ установки Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ свойств padding-bottom ΠΈΠ»ΠΈ padding-top. Π”Π°Π½Π½ΠΎΠ΅ объявлСниС (Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ явного height), ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ высоту элСмСнта Π² 50% ΠΎΡ‚ Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹.

.CoverImage {
  padding-bottom: 50%;
}

ИзмСнСния значСния Ρ‚Π°ΠΊΠΎΠ³ΠΎ padding’a ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ ΠΈ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон. НапримСр, Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ padding-Π° Π² 25% Π±ΡƒΠ΄Π΅Ρ‚ пропорция 4:1, padding Π² 33.333% Π² 3:1 соотвСтствСнно, ΠΈ Ρ‚.Π΄.

ΠœΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с использованиСм этого Ρ‚Ρ€ΡŽΠΊΠ°/Ρ…Π°ΠΊΠ° для ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ссли Ρƒ элСмСнта объявлСно max-height, ΠΎΠ½ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒΡΡ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Β«Ρ…Π°ΠΊΠ°Β». ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ padding элСмСнту, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ псСвдоэлСмСнт ΠΈ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ padding ΡƒΠΆΠ΅ Π΅ΠΌΡƒ.

.CoverImage:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ max-height Ρƒ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ элСмСнта Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ. Π‘Π»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ Π±Ρ‹ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ псСвдоэлСмСнта.

.CoverImage {
  display: block;
  max-height: 300px;
  max-width: 1000px;
  overflow: hidden;
}

.CoverImage:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠ΅ΠΌ для ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ сторон ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ FlexEmbed Π² прСпроцСссорС SUITCSS. Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ ΠΏΡ€Π΅ΠΆΠ΄Π΅ всСго для ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… встраиваСмых Π²ΠΈΠ΄Π΅ΠΎ, Π½ΠΎ ΠΎΠ½ достаточно Π³ΠΈΠ±ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ элСмСнт с ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΌ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ΠΌ сторон. Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ прСдоставляСт ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ для ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ 2:1, 3:1, 16:9, ΠΈ 4:3. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ-ΠΎΠ±Π»ΠΎΠΆΠ΅ΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ FlexEmbed.

<div></div>

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°-ΠΎΠ±Π»ΠΎΠΆΠΊΠ° добавляСтся Π² качСствС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ растягиваСтся Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, достаточного, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ элСмСнта. Π­Ρ‚ΠΎ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ обрСТСтся Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π² ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ элСмСнта.

.CoverImage {
  ...
  background-repeat: no-repeat;
  background-size: cover;
}

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ для Ρ€Π°Π·Π½Ρ‹Ρ… ситуаций, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style.

<div></div>

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ„ΠΎΠ½Π° ΠΈ цСнтрирования Π±Π»ΠΎΠΊΠ°. Π­Ρ‚Π° Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ Π² элСмСнтС, ΠΈ Ρ‡Ρ‚ΠΎ сам элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ Π²Π½ΡƒΡ‚Ρ€ΠΈ своСго родитСля (ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ достигнСт значСния max-width).

.CoverImage {
  ...
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}

Π€ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Если Π²Ρ‹ полагались Π½Π° ΠΌΠΎΠ΄ΡƒΠ»ΡŒ FlexEmbed, Ρ‚ΠΎ Π²Π°ΠΌ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ совсСм Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. (ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π΄Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€ со всСм ΠΊΠΎΠ΄ΠΎΠΌ, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ΄ ΠΎΡ‚ FlexEmbed)

/**
 * трСбуСтся: suitcss/встроСнная Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ
 */

.CoverImage {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  max-height: 300px;
  max-width: 1000px;
}
<div
    <
</div>

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ настройки, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°, ΠΈΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌΠΈ словами cover ΠΈ contain для background-size.

P.S. Π­Ρ‚ΠΎ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсно:

НалоТСниС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ (Π½Π΅ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Π»ΠΎΡΡŒ) Β· GitHub

НалоТСниС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ (Π½Π΅ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Π»ΠΎΡΡŒ) Β· GitHub

Instantly share code, notes, and snippets.

НалоТСниС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ (Π½Π΅ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Π»ΠΎΡΡŒ)

//ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° находится Π² Π΄ΠΈΠ²Π΅ ( <div><img src=»/images/old-image.png»></div> )
$(‘div.myimage’).hover(
function(){ //ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ
var sourceImg = $(‘div.myimage img’).attr(‘src’); //Π·Π°Π±ΠΈΡ€Π°Π΅ΠΌ ΡƒΡ€Π» ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ
$(‘div.myimage img’).attr(‘/images/new-image.png’).css({opacity: 0.5}); //вставляСм Π½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅ΠΌ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ 50%
$(this).css(‘background-image’, sourceImg); //Π΄Π΅Π»Π°Π΅ΠΌ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ„ΠΎΠ½ΠΎΠΌ Π΄ΠΈΠ²Π°
},
function(){ //ΠΏΡ€ΠΈ ΡƒΡ…ΠΎΠ΄Π΅ ΠΌΡ‹ΡˆΠΈ
var sourceImg = $(this).css(‘background-image’); //Π·Π°Π±ΠΈΡ€Π°Π΅ΠΌ ΡƒΡ€Π» старой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ
$(‘div.myimage img’).attr(sourceImg).css({opacity: 1}); //вставляСм ΡΡ‚Π°Ρ€ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ
$(this).css(‘background-image’, ‘none’); //ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ Ρ„ΠΎΠ½
}
);
You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ„ΠΎΠ½ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана? Π‘Ρ‚Π°Ρ‚ΡŒΡ-инструкция

ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ считаСтся Π² настоящий ΠΌΠΎΠΌΠ΅Π½Ρ‚ Ρ‚Ρ€Π΅Π½Π΄ΠΎΠΌ Π² Π²Π΅Π± Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠŸΠΎΡ‡Ρ‚ΠΈ всС Ρ‚Π΅ΠΌΡ‹ Π½Π° WordPress ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ этот Ρ€Π΅ΠΆΠΈΠΌ. МногиС Π² коммСнтариях ΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтях ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‚ нас ΠΏΡ€ΠΎ Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ страницы. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ настройка Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ с html ΠΈ css Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ. Π’Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ потрСбуСтся сам ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ» большого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π΄Π° Π΅Ρ‰Π΅ ΠΏΡ€ΠΈ этом Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сама ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π»Π°ΡΡŒ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. Казалось Π±Ρ‹, всС ΠΎΡ‡Π΅Π½ΡŒ слоТно ΠΈ Π½ΡƒΠΆΠ½ΠΎ Π²Π½ΠΈΠΊΠ°Ρ‚ΡŒ, Π½ΠΎ Π½Π΅Ρ‚ Π΄Ρ€ΡƒΠ·ΡŒΡ. ВсС Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈ Π±Π΅Π· рСдактирования ΠΎ Ρ‡Π΅ΠΌ ΠΈ повСдаю Π² этой Π·Π°ΠΌΠ΅Ρ‚ΠΊΠ΅.

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ Simple Full Screen Background Image. ПослС Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Β«Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄Β» Fullscreen BG Image ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ своС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 1600 Γ— 1200 пиксСлСй. Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ Π² соотвСтствии с экраном Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ сохранСния изобраТСния. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° свой сайт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

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

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² PRO вСрсии

Если Π²Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния Π±Ρ‹Π»ΠΈ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ Π½Π° вашСм сайтС, Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° вСрсия PRO этого ΠΏΠ»Π°Π³ΠΈΠ½Π°. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ бСсплатного ΠΏΠ»Π°Π³ΠΈΠ½Π°, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 1 Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, вСрсия pro позволяСт ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния.

ΠΠ°ΠΈΠ»ΡƒΡ‡ΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΠΎΠ± Full Screen Background Images Pro Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния для Ρ€Π°Π·Π½Ρ‹Ρ… контСкстов. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для:

  • ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ
  • Π°Ρ€Ρ…ΠΈΠ²
  • ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Π΅ записи
  • страницы
  • Главная страница Π±Π»ΠΎΠ³Π°
  • Главная страница
  • Поиск ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅

Плагин ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ, поэтому, Ссли для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° записи Π½Π΅Ρ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния, ΠΎΠ½ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ глобальноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Он Ρ‚Π°ΠΊΠΆΠ΅ позволяСт Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΈ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния нСпосрСдствСнно ΠΈΠ· Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° сообщСний. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Ρ†Π²Π΅Ρ‚Π°Ρ‚ΡŒ изобраТСния ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы.

Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡ‡Π΅Π½ΡŒ эффСктивСн с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ Π½Π°ΠΊΠ»Π°Π΄Π½Ρ‹Π΅ расходы.

ΠœΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Π»ΠΎΠ³Π³Π΅Ρ€Ρ‹ фактичСски ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния Π² качСствС Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠ·Π½Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния. Π­Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ, Ссли Ρƒ вас Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ чувство Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ эта ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΠΎΠΌΠΎΠ³Π»Π° Π²Π°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ полноэкранноС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² WordPress. А Π²Ρ‹ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π½Π° сайтС? Как Π²Ρ‹ это Π΄Π΅Π»Π°Π΅Ρ‚Π΅? Π’Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΊΠΎΠ΄Π° ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½? Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ Π½Π°ΠΌ, оставив ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π½ΠΈΠΆΠ΅.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ изобраТСния HTML


Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ HTML позволяСт Π²Ρ‹ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ для Ρ€Π°Π·Π½Ρ‹Π΅ устройства ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана.



HTML-элСмСнт

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ HTML Π΄Π°Π΅Ρ‚ Π²Π΅Π±- Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ большС гибкости Π² ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ рСсурсов изобраТСния.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ содСрТит ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ more элСмСнтов, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ссылаСтся ΠΊ Ρ€Π°Π·Π½Ρ‹ΠΌ изобраТСниям Ρ‡Π΅Ρ€Π΅Π· srcset Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π»ΡƒΡ‡ΡˆΠ΅ всСго соотвСтствуСт Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌΡƒ Π²ΠΈΠ΄Ρƒ ΠΈ / ΠΈΠ»ΠΈ устройству.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ media Атрибут , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся Π‘Π°ΠΌΡ‹ΠΉ подходящий.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ изобраТСния для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана:





ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ВсСгда ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅ элСмСнт ΠΊΠ°ΠΊ послСдний Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт элСмСнт элСмСнта . Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ элСмСнт , ΠΈΠ»ΠΈ Ссли Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Π΅Π³ΠΎΠ² Π½Π΅ совпадаСт.


Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт изобраТСния

Π£ элСмСнта Π΅ΡΡ‚ΡŒ Π΄Π²Π΅ основныС Ρ†Π΅Π»ΠΈ:

1.Полоса пропускания

Если Ρƒ вас малСнький экран ΠΈΠ»ΠΈ устройство, Π½Π΅Ρ‚ нСобходимости Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ большой Ρ„Π°ΠΉΠ» изобраТСния. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ элСмСнт с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΈ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ любоС ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… элСмСнты.

2. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°

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

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ распознаваСмый Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ изобраТСния:




Beatles

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ values ​​и ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты .


Π’Π΅Π³ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ HTML

ВСг ОписаниС
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
<ΠΊΠ°Ρ€Ρ‚Π°> ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΊΠ°Ρ€Ρ‚Ρƒ изобраТСния
<Π·ΠΎΠ½Π° ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π° ΠΊΠ°Ρ€Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ
<ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°> ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… рСсурсов ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ


Как Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ Div

Π’ этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта

.ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ свойства CSS. Π’ частности, это ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств background ΠΈ background-size. НиТС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ эти свойства ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для достиТСния нашСй Ρ†Π΅Π»ΠΈ.

РСшСния со свойствами CSS background ΠΈ background-sizeΒΆ

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ элСмСнт

ΠΈ присваиваСм Π΅ΠΌΡƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ класса, Π° Π·Π°Ρ‚Π΅ΠΌ стилизуСм класс Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ CSS. Π’Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ изобраТСния Ρ‡Π΅Ρ€Π΅Π· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«centerΒ» сокращСнного свойства Ρ„ΠΎΠ½Π°.УстановитС ΡˆΠΈΡ€ΠΈΠ½Ρƒ вашСго изобраТСния Π½Π° Β«100%Β». Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ высоту ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π° нашСго изобраТСния.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ цСнтрирования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π²Π½ΡƒΡ‚Ρ€ΠΈ

со свойством background: ΒΆ
  

 
    НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
   <ΡΡ‚ΠΈΠ»ΡŒ>
     .bg-image {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
       высота: 200 пиксСлСй;
       Ρ„ΠΎΠ½: url ("/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg ") Ρ†Π΅Π½Ρ‚Ρ€ Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°;
       Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π°: 250 пиксСлСй;
     }
   
 
 
   
.
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта

ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ всС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Π΅Π· обрСзания ΠΈΠ»ΠΈ растяТСния ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π΅Π³ΠΎ части, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π³Π΄Π΅ ΠΌΡ‹ установитС для свойства background-size Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ «ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ».

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ цСнтрирования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ значСния «contain» свойства background-size: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      .bg-image {
        высота: 400 пиксСлСй;
        Ρ„ΠΎΠ½: url ("/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat center;
        Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π°: ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ;
      }
    
  
  
    
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Наш послСдний ΠΏΡ€ΠΈΠΌΠ΅Ρ€ дСмонстрируСт, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ вСсь элСмСнт

Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π½Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ лишнСго мСста.Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«ΠΎΠ±Π»ΠΎΠΆΠΊΠΈΒ» свойства background-size.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ цСнтрирования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ «ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ» свойства background-size: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      .bg-image {
        ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
        высота: 400 пиксСлСй;
        Ρ„ΠΎΠ½: url ("/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg ") Ρ†Π΅Π½Ρ‚Ρ€ Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°;
        Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
      }
    
  
  
    
Π­Ρ‚ΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Bootstrap Background image — Π£Ρ‡Π΅Π±Π½ΠΈΠΊΠΈ с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ

  1. Utilities
  2. Background image

Π›Π΅Π³ΠΊΠΎ установитС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для любого элСмСнта Π±Π΅Π· написания ΠΊΠΎΠ΄Π° CSS.

ΠžΠ±Π·ΠΎΡ€

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ³ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния для любого элСмСнта Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ΄Π° CSS. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс .bg-img Π² свой элСмСнт ΠΈ класс .has-bg-img ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ΡΡ Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ CSS послС ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ . Π’Π°ΠΊΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π° , ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ€Π΅ΠΆΠΈΠΌ налоТСния Ρ„ΠΎΠ½Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±Π°Π½Π½Π΅Ρ€Π° Ρ€Π°Π·Π΄Π΅Π»Π° гСроя с ΠΎΠ±Π»ΠΎΠΆΠΊΠΎΠΉ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ автоматичСски Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ элСмСнта с использованиСм background-size: cover .

Hero Section

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Torus Kit Π»Π΅Π³ΠΊΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
  

Π Π°Π·Π΄Π΅Π» Π³Π΅Ρ€ΠΎΠ΅Π²

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Torus Kit Π»Π΅Π³ΠΊΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
...

Π Π΅ΠΆΠΈΠΌ налоТСния Ρ„ΠΎΠ½Π°

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· .bg-blend- <ΡƒΠΌΠ½ΠΎΠΆΠΈΡ‚ΡŒ | Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ | экран> . Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Multiply

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ .bg-blend-multiply class ΠΊ .has-bg-img , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅ΠΆΠΈΠΌ налоТСния multiply .

Π Π΅ΠΆΠΈΠΌ налоТСния Ρ„ΠΎΠ½Π°: Π£ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅
  
Π Π΅ΠΆΠΈΠΌ налоТСния Ρ„ΠΎΠ½Π°: "Π£ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅"
...

Overlay

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ .bg-blend-overlay class ΠΊ .has-bg-img для использования Ρ€Π΅ΠΆΠΈΠΌΠ° налоТСния налоТСния .

Π Π΅ΠΆΠΈΠΌ налоТСния Ρ„ΠΎΠ½Π°: Overlay
  
Π Π΅ΠΆΠΈΠΌ налоТСния Ρ„ΠΎΠ½Π°: "Π£ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅"
...

Screen

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ .bg-blend-screen class ΠΊ .has-bg-img , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅ΠΆΠΈΠΌ налоТСния screen .

Π Π΅ΠΆΠΈΠΌ налоТСния Ρ„ΠΎΠ½Π°: Π­ΠΊΡ€Π°Π½
  
Π Π΅ΠΆΠΈΠΌ налоТСния Ρ„ΠΎΠ½Π°: "Π£ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅"
 ...

ΠžΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-подходящСС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

МоТно ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ доступныС слуТСбныС классы. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс .bg ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, Ρ‡Ρ‚ΠΎ сдСлаСт Π΅Π³ΠΎ с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ установитС ΡˆΠΈΡ€ΠΈΠ½Ρƒ : 100% ΠΈ высоту : 100% . Π—Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ .obj-fit-cover class this , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΠ»ΠΎ пространство. Π’Π°ΠΊΠΆΠ΅ Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ слуТСбный класс ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ элСмСнт .bg появится Π½Π° Π½Π°Π΄ содСрТимым , Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ этому содСрТимому классы .position-relative ΠΈ .z-index-1 .

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с
.obj-fit-cover
  
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с .obj-fit-cover
...

Часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Bootstrap

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Bootstrap

НСпосрСдствСнно ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ background-image CSS нСльзя, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ .opacity- * для изобраТСния с классом нСпрозрачности.

ΠΠ΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст для Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ тСкста

Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ отобраТСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Ρ„ΠΎΠ½Π΅ CSS

Если вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ содСрТит Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ для ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‚ΠΎΠ³Π΄Π° ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ прСдоставлСн Π² HTML Ρ‚Π΅Π³ с Π½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰ΠΈΠΌ вмСсто тСкст. БпСцификация CSS гласит:

По ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ доступности Π°Π²Ρ‚ΠΎΡ€Π°ΠΌ Π½Π΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ изобраТСния ΠΊΠ°ΠΊ СдинствСнный способ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.Π‘ΠΌ. Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ Руководство ΠΏΠΎ доступности ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° F3 [WCAG20]. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ нСдоступны Π² нСграфичСских прСзСнтациях, ΠΈ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² высококонтрастныС Ρ€Π΅ΠΆΠΈΠΌΡ‹ отобраТСния. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ .

НС ΠΌΠΎΠ³Ρƒ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ использования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS ΠΈΠ»ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ тСкст для "Π½Π΅Π²Π°ΠΆΠ½Ρ‹Π΅" Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅ΠΉ срСды ΠΈ Ρ‚. Π΄.?

БпСцификация CSS Π΄Π΅Π»Π°Π΅Ρ‚ это "Π”ΠžΠ›Π–ΠΠ«", Π° Π½Π΅ "Π”ΠžΠ›Π–Π•Π", ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π±Ρ‹Π²Π°ΡŽΡ‚ случаи, ΠΊΠΎΠ³Π΄Π° Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ затрудняСт ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Π³ΠΎ Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ HTML Π±Π΅Π· Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½Π° интСрфСйса.Π’ Π΄Ρ€ΡƒΠ³ΠΈΡ… случаях Π°Π²Ρ‚ΠΎΡ€ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Ρ…ΠΎΡ‚Π΅Ρ‚ΡŒ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст для ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅Π³ΠΎ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся , Π° Π½Π΅ "Π²Π°ΠΆΠ½ΠΎ" для понимания содСрТания, Π½ΠΎ ΠΈΠ· вСТливости ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ чтСния с экрана, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΎ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅. Π’ΠΎΡ‚ подробная ΡΡ‚Π°Ρ‚ΡŒΡ ΠΎΠ± эмбиСнтС. изобраТСния vs чистоС ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅ vs ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΎΠ±Ρ€Π°Π·Ρ‹.

ΠŸΡ€ΠΈ прСдоставлСнии Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ тСкста для изобраТСния CSS Π΅ΡΡ‚ΡŒ количСство сообраТСний

Если

Π² Ρ‚Π΅Π³Π΅ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ содСрТимоС, Ρ‚ΠΎΠ³Π΄Π° role = "img" ΠΈ ария-этикСтка ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π΅ содСрТимоС ΠΈΠ·-Π·Π° доступных расчСт ΠΈΠΌΠ΅Π½ΠΈ , ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ просто ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ария-этикСтка .

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π½Π΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΠΉΡ‚Π΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ CSS Π²Π½ΡƒΡ‚Ρ€ΠΈ

ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит любой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π›ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ пустой ΠΈ ария-этикСтка с role = "img"

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ это:


<Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ role = "img" aria-label = "[помСститС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст здСсь]>
[всС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΌΠΎΠ΅ содСрТаниС]

НС Π΄Π΅Π»Π°ΠΉΡ‚Π΅ этого:


[всС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΌΠΎΠ΅Π³ΠΎ содСрТания]

Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Ρƒ Π°Π²Ρ‚ΠΎΡ€Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ CSS Π² div, содСрТит ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

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

, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π·Π°Ρ‚Π΅ΠΌ хакСрский запасной Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ - ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это.

<Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ role = "img" aria-label = "[помСститС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст здСсь]>
[всС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΌΠΎΠ΅ содСрТаниС]

Π­Ρ‚ΠΎ Π²Π·Π»ΠΎΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сСмантичСски Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π° самом Π΄Π΅Π»Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Однако с экрана Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ Π²ΠΈΠ΄ΠΈΡ‚

с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ игнорируСтся, поэтому Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ нСпосрСдствСнно послС Π½Π΅Π³ΠΎ эта информация Π±ΡƒΠ΄Π΅Ρ‚ прСдоставлСна ​​таким ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст находится Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС, Ρ‡Ρ‚ΠΎ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.

Π‘Π²ΠΎΠ΄ΠΊΠ°

  • Π‘Ρ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для Π²Π°ΠΆΠ½Ρ‹Ρ… ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ
  • Для ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ CSS, любСзно ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст. ΠŸΡ€ΠΈ этом помСститС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² собствСнноС пустой с aria-label ΠΈ role = "img. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π²Π΅Ρ€Π½ΠΎ Π² ситуации Π³Π΄Π΅ CSS Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ содСрТания.
  • Если
    с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ CSS ΠžΠ‘Π―Π—ΠΠ’Π•Π›Π¬ΠΠž Π”ΠžΠ›Π–Π•Π ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ пустой с aria-label ΠΈ role = "img" сразу послС
    , ΠΈΠΌΠ΅ΡŽΡ‰Π΅Π³ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

НС ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Twitter @davidmacd

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ ΠΎΠ± Π°Π²Ρ‚ΠΎΡ€Π΅:

Дэвид Макдональд - Π²Π΅Ρ‚Π΅Ρ€Π°Π½ WCAG, сорСдактор использования WAI ARIA Π² HTML5 ΠΈ Ρ‡Π»Π΅Π½ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΏΠΎ доступности HTML5. МнСниС ΠΌΠΎΠ΅ собствСнноС.


HTML img vs CSS background-image

Π˜Ρ‚Π°ΠΊ, Π²Ρ‹ смотритС Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² Π½Π΅ΠΉ ΠΈ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ использованиСм HTML & lt; img & gt; ΠΈΠ»ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ CSS.

Π‘Π½Π°Ρ‡Π°Π»Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ: Β«Π­Ρ‚ΠΎ Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅?Β»

Π’ ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ², сущСствуСт мноТСство ситуаций, ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π° Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° приводят ΠΊ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΌΡƒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρƒ.

Но Π²Ρ‹ здСсь, Π·Π½Π°Ρ‡ΠΈΡ‚, , Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ осознанноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ .

Π’ΠΎΡ‚ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΉ процСсс Π²Ρ‹Π±ΠΎΡ€Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ.

Π¨Π°Π³ 1. Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ

Π€ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния CSS ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ΄Π½Ρ‹, Π½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒΡŽ.

НапримСр, & lt; img & gt; Π’Π΅Π³ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‰Π°ΡŽΡ‰ΠΈΠΉ тСкст ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Ρ‹ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ чтСния с экрана.Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Π½ΠΎ ΠΈ для индСксации Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Ρ… поиска Google. Π’ΠΎΡ‚ Π²Ρ‹Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΈΠ· ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠ³Π° Google для Π²Π΅Π±-мастСров ΠΎΠ± ΡƒΠΌΠ½ΠΎΠΌ использовании Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²:

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ€ΠΎΠ±ΠΎΡ‚ Googlebot Π½Π΅ Π²ΠΈΠ΄ΠΈΡ‚ изобраТСния Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, ΠΌΡ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ концСнтрируСмся Π½Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, прСдставлСнной Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ alt. НС ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Β«altΒ» словом Β«titleΒ» ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ, Ссли ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Ρ†Π΅Π½Π½ΠΎΡΡ‚ΡŒ для Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ!

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ доступности ΠΈ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ SEO? Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ & lt; img & gt; Ρ‚Π΅Π³.

ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ сообраТСния относятся ΠΊ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡΠΌ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΊΠ°ΠΊ чисто-Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π¨Π°Π³ 2. Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ CSS ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ

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

Если Ρƒ вас Π΅ΡΡ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΠ° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΠ±ΡŠΡΠ²Π»Π΅Π½Π½Ρ‹Ρ… Π² вашСм CSS, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ потрСбуСтся большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» CSS ΠΈ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ изобраТСния, Ρ‡Ρ‚ΠΎ Π·Π°Π΄Π΅Ρ€ΠΆΠΈΡ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ всСй страницы.

с & lt; img & gt; , запросы Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Π°Π½Π°Π»ΠΈΠ·Π° HTML, поэтому любой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³Ρƒ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, встроСнныС изобраТСния ( & lt; img & gt; ΠΈΠ»ΠΈ & lt; picture & gt; ) ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ инструмСнты, ΠΊΠ°ΠΊ Π·Π°Π»ΠΈΠ²ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ отлоТСнная Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°, для Π΅Ρ‰Π΅ большСго ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

Π¨Π°Π³ 3. ВозмоТности CSS манипулирования Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ

Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ эстСтики, Π° прСимущСства Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹, рассмотритС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ манипуляции, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρƒ вас Π΅ΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Π€ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ вмСстС с background-color , background-repeat , background-attachment , background-position ΠΈ background-blend-mode . Π­Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ мноТСство возмоТностСй, Ссли Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π² манипуляциях.

Если Π²Ρ‹ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚Π΅ тСкст ΠΏΠΎΠ²Π΅Ρ€Ρ… изобраТСния, Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ CSS.

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

HTML & lt; img & gt; Π’Π΅Π³ΠΈ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для обСспСчСния доступности ΠΈ SEO.Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ скорости, ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ манипуляциях, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся чисто Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π”Π΅ΡΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² для установки изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния CSS

НазначСниС свойства Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния CSS

Бвойство CSS background-image ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния элСмСнтов HTML, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ div, Π°Π±Π·Π°Ρ†Ρ‹, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†, Ρ‚Π΅Π»ΠΎ ΠΈ Ρ‚. Π”.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ изобраТСния с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡΠΌΠΈ, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ png, jpg, gif, svg ΠΈ Ρ‚. Π”.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для установки Ρ„ΠΎΠ½Π° элСмСнтов с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS3. НапримСр:

Настройка Ρ„ΠΎΠ½Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ изобраТСния:

background-image: url (Β«images / demo.jpgΒ»);


Или ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сокращСнноС свойство Ρ„ΠΎΠ½Π°:

Ρ„ΠΎΠ½: url (Β«images / demo.jpg ”);


Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ:

Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: & nbsp; URL (Β«http://www.example.com/images/demo.jpgΒ»);


Установка Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:

background-image: url (Β«images / image1.jpgΒ»), url (Β«images / image2.jpg Β»), url (Β« images / image3.jpg Β»);

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ дСмонстрации Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… способов использования свойства CSS background-image. Π― Π±ΡƒΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ мноТСствСнныС изобраТСния с ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ значСниями. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΆΠΈΠ²Ρ‹Π΅ дСмонстрации с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ установки Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния для div

БоздаСтся класс CSS, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Класс назначаСтся Ρ‚Π΅Π³Ρƒ

. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅:

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ класс устанавливаСт Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:

.divbk {

background-image: url ("images / sunset.jpg");

высота: 400 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 450 пиксСлСй;

}


Установка ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Ρ€Π΅Π·Π΅Ρ€Π²Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°

Если ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ: ΠΈΠ·-Π·Π° скорости Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ сСрвСра ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π΅Π·Π΅Ρ€Π²Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Π² свойствС Ρ„ΠΎΠ½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Ρ„ΠΎΠ½: url (Β«images / sunset1.jpg Β») #eee;

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΎΠ½Π»Π°ΠΉΠ½:

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Π’ URL-адрСсС для дСмонстрации Π΄Π°Π½ΠΎ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ имя изобраТСния. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ нСдоступно, вмСсто Π½Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°:

.divbk {

Ρ„ΠΎΠ½: url ("images / sunset1.jpg") # A3B8C0;

высота: 400 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 450 пиксСлСй;

}


ДСмонстрация Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я использовал Π΄Π²Π° изобраТСния Π² свойствС CSS3 background-image.Наряду с настройкой Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства background position ΠΈ background-repeat:

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ свойствами CSS:

background-image: url ("images / car.jpg"), url ("images / motoway.jpg");

высота: 500 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 400 пиксСлСй;

background-position: center, left;

Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°;


ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для прСдотвращСния повторСния изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ значСния no-repeat .Π₯отя Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΠΎΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ€Π°Π·Π½Ρ‹Π΅ направлСния.

Если Π²Ρ‹ Π½Π΅ ΡƒΠΊΠ°ΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π²Π΅Ρ€Ρ…Ρƒ слСва для ΠΎΠ±ΠΎΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ»ΠΈ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ

Π₯отя Π½Π΅Ρ‚ свойства для установки ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, установлСнных Π² качСствС Ρ„ΠΎΠ½Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Photoshop ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ инструмСнт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ изобраТСния ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ.

Π’ CSS ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· способов ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использованиС Ρ„ΠΎΠ½Π° с linear-gradient ΠΈ использованиС Ρ‚Π°ΠΌ RGB, Ρ‡Ρ‚ΠΎ позволяСт ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ дСмонстрируСт, ΠΊΠ°ΠΊ это ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ:

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° дСмонстрационной страницС. Π­Ρ‚ΠΎ CSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для достиТСния нСпрозрачности Ρ„ΠΎΠ½Π° изобраТСния:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

.divbk {

height: 450px;

ΡˆΠΈΡ€ΠΈΠ½Π°: 400 пиксСлСй;

Ρ„ΠΎΠ½: -webkit-linear-gradient (свСрху, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg");

Ρ„ΠΎΠ½: -o-linear-gradient (свСрху, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg");

Ρ„ΠΎΠ½: -ms-linear-gradient (top, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg ");

Ρ„ΠΎΠ½: -moz-linear-gradient (top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url (" images / motoway.jpg ");

Ρ„ΠΎΠ½: -webkit-gradient (Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ, слСва Π²Π²Π΅Ρ€Ρ…Ρƒ, слСва Π²Π½ΠΈΠ·Ρƒ, остановка Ρ†Π²Π΅Ρ‚Π° (0%, rgba (255,255,255,0,7)), остановка Ρ†Π²Π΅Ρ‚Π° (100%, rgba (255,255,255,0,7))), URL-адрСс ("images / motoway.jpg");

Ρ„ΠΎΠ½: linear-gradient (Π²Π²Π΅Ρ€Ρ…, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg) ");

}


Бвойство CSS3 совмСстимо со всСми основными Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ; ΠΎΠ΄Π½Π°ΠΊΠΎ Π²Π°ΠΌ придСтся ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.НапримСр, Π² Mozilla Firefox Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту строку:

Ρ„ΠΎΠ½: -moz-linear-gradient (свСрху, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url ("images / motoway.jpg");


Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я использовал Ρ‚Ρƒ ΠΆΠ΅ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ для div, Ρ‡Ρ‚ΠΎ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Если Ρƒ вас Π΅ΡΡ‚ΡŒ мСньшСС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ больший div, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство repeat, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

Ρ„ΠΎΠ½: linear-gradient (to top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url (Β«images / motoway.jpgΒ» повторяСтся 0 0);


Π’ случаС Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ, Π° пустоС пространство Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΎ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ RGB.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ я использовал Ρ‚ΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, с нСсколькими Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями.

ИспользованиС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π² Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ… HTML

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния для элСмСнтов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство CSS background image.Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ изобраТСния Π΄Π°Π½Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ установлСны ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ. Если Π²Ρ‹ установитС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² основном Ρ‚Π΅Π³Π΅

, Ρ‚ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΠΈ ΠΊΠΎ всСй Ρ‚Π°Π±Π»ΠΈΡ†Π΅.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ дСмонстрации я ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»ΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Ρ‚Π°Π±Π»ΠΈΡ†:

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, особСнно фокус Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

26

27

28

29

31

34

35

36

37

.Π΄Π΅ΠΌΠΎΡ‚Π±Π» {

Π³Ρ€Π°Π½ΠΈΡ†Π°-ΠΎΠ±Ρ€ΡƒΡˆΠ΅Π½ΠΈΠ΅: ΠΎΠ±Ρ€ΡƒΡˆΠ΅Π½ΠΈΠ΅;

}

.demotbl th {

Ρ†Π²Π΅Ρ‚: # EAE635;

Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 20 пиксСлСй;

Ρ„ΠΎΠ½: url ("images / CSS-background-image-table.jpg");

высота: 50 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 150 пиксСлСй;

border-radius: 6px;

}

.demotbl td {

Π³Ρ€Π°Π½ΠΈΡ†Π°: 1 пиксСль, пунктирная чСрная;

Π±ΠΎΡ€Π΄ΡŽΡ€-Π²Π΅Ρ€Ρ…: Π½Π΅Ρ‚;

Ρ†Π²Π΅Ρ‚: # 002F5E;

отступ: 15 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 100 пиксСлСй;

Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # D2E6FB;

}


Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π½Π° дСмонстрационной страницС.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойства CSS3, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, для создания изобраТСния, ΠΏΠΎΡ…ΠΎΠΆΠ΅Π³ΠΎ Π½Π° внСшний Π²ΠΈΠ΄, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ². Π—Π΄Π΅ΡΡŒ написано руководство.

Установка Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π½Π° всю страницу ΠŸΡ€ΠΈΠΌΠ΅Ρ€ CSS

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС полноэкранного Ρ„ΠΎΠ½Π° для страницы.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ссылку Π½ΠΈΠΆΠ΅.

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Установка ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° div

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

Для этой дСмонстрации я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ повторяСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ всС пространство элСмСнтов div.

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

CSS:

Ρ„ΠΎΠ½: url ("images / background.jpg") Ρ†Π΅Π½Ρ‚Ρ€ Ρ†Π΅Π½Ρ‚Ρ€ исправлСн;

Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅;

высота: 300 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;


Однако, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это, рассмотритС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ скорости с кСшСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

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

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство background-size с background-image, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

Бинтаксис для использования свойства CSS background-size, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π°: 200 пиксСлСй 300 пиксСлСй;

Π“Π΄Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ прСдставляСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ высоту изобраТСния.

Π‘ΠΌ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅:

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ….НапримСр:

background-image: url ("images / banana.jpg");

Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π°: 70%;


Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ background-repeat: no-repeat; Π² этом случаС, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ пространство ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (Π² этом случаС div) Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΎ этим ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ прСобразования ΠΊ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ изобраТСниям

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство transform с сокращСниСм Ρ„ΠΎΠ½Π° ΠΈΠ»ΠΈ свойствами Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² использования свойства transform с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями:

ДСмонстрация ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π° изобраТСния Π½Π° 20 градусов

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

CSS:

Ρ„ΠΎΠ½: url ("images / bk.jpg");

ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅: ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚ (20 градусов);


Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΊΠ»ΠΎΠ½ΡΡ‚ΡŒ, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства transform.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ пСрСкос со значСниями x ΠΈ y :

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для пСрСкоса изобраТСния ΠΏΠΎ свойству прСобразования:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

26

27

28

29

31

34

35

36

37

.divbk {

Ρ„ΠΎΠ½: url ("images / bk.jpg");

-webkit-transform: skew (10deg, 10deg);

-moz-transform: skew (10deg, 10deg);

-ms-transform: skew (10deg, 10deg);

-ΠΎ-ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅: Π½Π°ΠΊΠ»ΠΎΠ½ (10 градусов, 10 градусов);

ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅: Π½Π°ΠΊΠ»ΠΎΠ½ (10deg, 10deg);

высота: 230 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 215 пиксСлСй;

поля: 42 пиксСля;

}

.ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ {

Π±ΠΎΡ€Π΄ΡŽΡ€: сплошной Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ 1 пиксСль;

высота: 400 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 300 пиксСлСй;

Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # D5E6F4;

}


ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ссылку Π²Ρ‹ΡˆΠ΅.

ПослСднСС слово

Бвойство CSS background-image слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ссли ΠΎΠ½ΠΎ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π° Π½Π΅ содСрТимым.Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ малСнькиС ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΌΠ΅ΡˆΠΈΠ²Π°Ρ‚ΡŒ нСбольшиС изобраТСния со свойствами CSS3.

Если ваши изобраТСния ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство background-image, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Ρ„ΠΎΠ½Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π² качСствС Ρ„ΠΎΠ½Π° Π²Π΅Π±-страницы, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Ρ‚Π°Π±Π»ΠΈΡ† ΠΈ Ρ‚. Π”.

Если изобраТСния ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ сСмантичСскоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π²Π°ΠΌ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π°ΡˆΡƒ Π²Π΅Π±-страницу. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ΠΈ alt ΠΈ title Π² Ρ‚Π΅Π³Π΅ , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΆΠ½Ρ‹ для Ρ†Π΅Π»Π΅ΠΉ SEO, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ донСсти смысл Π΄ΠΎ поисковых систСм.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ изобраТСния, Ссли Π²Π΅Π±-страницы ΠΏΠ΅Ρ‡Π°Ρ‚Π°ΡŽΡ‚ΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π²Π°ΠΌ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ .

Div Background-Image - JSFiddle - Code Playground

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠΉ Π‘Ρ‚ΠΎΠ»Π±Ρ†Ρ‹ НиТниС Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Π’ΠΊΠ»Π°Π΄ΠΊΠΈ (столбцы) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ (строки)

Консоль

Консоль Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ (Π±Π΅Ρ‚Π°)

ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ консоль ΠΏΡ€ΠΈ запускС

ΠžΠ±Ρ‰ΠΈΠ΅

НомСра строк

ΠžΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π»ΠΈΠ½ΠΈΠΈ

ΠžΡ‚ΡΡ‚ΡƒΠΏ с табуляциСй

Подсказка ΠΏΠΎ ΠΊΠΎΠ΄Ρƒ (Π°Π²Ρ‚ΠΎΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅) (Π±Π΅Ρ‚Π°)

Π Π°Π·ΠΌΠ΅Ρ€ отступа:

2 ΠΏΡ€ΠΎΠ±Π΅Π»Π° 3 ΠΏΡ€ΠΎΠ±Π΅Π»Π° 4 ΠΏΡ€ΠΎΠ±Π΅Π»Π°

ΠšΠ»ΡŽΡ‡Π΅Π²Π°Ρ ΠΊΠ°Ρ€Ρ‚Π°:

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Sublime TextEMACS

Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°:

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: BigBiggerJabba

ПовСдСниС

Код автозапуска

Волько ΠΊΠΎΠ΄ автозапуска, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ провСряСт

Код автосохранСния (натыкаСтся Π½Π° Π²Π΅Ρ€ΡΠΈΡŽ)

АвтоматичСски Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ HTML-Ρ‚Π΅Π³ΠΈ

АвтоматичСски Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ скобки

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΊΠΎΠ΄Π°

Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ

Π—Π°Π³Π»ΡƒΡˆΠΊΠΈ

ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ панСль шаблонов Ρ€Π΅ΠΆΠ΅

.
ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

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

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