Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Ρ„ΠΎΠ½ Π² html: Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок Π½Π° Π²Π΅Π±-страницу?

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

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ Π² html

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π²Π΅Π±-страницу, Π·Π°Π΄Π°ΠΉΡ‚Π΅ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π²Π½ΡƒΡ‚Ρ€ΠΈ значСния url стилСвого свойства background , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ добавляСтся ΠΊ сСлСктору body .

ΠžΠ±Ρ‰ΠΈΠΉ синтаксис добавлСния Ρ„ΠΎΠ½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ.

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

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

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°

HTML5 CSS 2.1 IE Cr Op Sa Fx

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ„ΠΎΠ½ Π²Π΅Π±-страницы Π·Π°Π΄Π°Π½ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ…Π°ΠΊΠΈ, Π° тСкст β€” Π±Π΅Π»Ρ‹ΠΌ. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ собой Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚.

Π’ ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π½Π° сайтС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ‚Π΅Π³Π° body ΠΈ CSS-стилСй: Π€ΠΎΠ½ Π² HTML. Π’ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ€Π΅Ρ‡ΡŒ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ ΠΎΠ± использовании ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² качСствС Ρ„ΠΎΠ½Π° Π½Π° сайтС, ΠΎ Ρ‚ΠΎΠΌ ΠΊΠ°ΠΊ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ Ρ„ΠΎΠ½ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ страницы ΠΈ Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π² качСствС Ρ„ΠΎΠ½Π° страницы β€” HTML

Рассмотрим сначала способ задания Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π½Π° сайтС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° background Ρ‚Π΅Π³Π° body:

Как Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅, рСкомСндуСтся ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° (ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° сайтС Π²ΠΎ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ максимально ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒΡΡ с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ контраст с тСкстом Π½Π° сайтС. НапримСр, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ тСкста Π½Π° сайтС, Ρ‚ΠΎ стоит ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚Π΅ΠΌΠ½ΠΎΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаСт тСкст Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅Π³ΠΊΠΎ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒΡΡ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° рСкомСндуСтся Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML, Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π°Π»ΠΈΠ΄Π½Ρ‹ΠΌ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ.

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π² качСствС Ρ„ΠΎΠ½Π° страницы β€” CSS

Π’ CSS Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ свойством background:

Π—Π΄Π΅ΡΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства background-attachment фиксируСтся Ρ„ΠΎΠ½ страницы, Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства background-repeat устанавливаСтся ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ изобраТСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. Но стоит ΡƒΡ‡Π΅ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Β«ΡΡˆΠΈΠ²Π°Ρ‚ΡŒΡΡΒ» ΠΏΠΎ краям.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° вСсь Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство background-size: 100%;

Π’ конструкторС сайтов «НубСкс» для любого сайта ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Ρ„ΠΎΠ½Π° ΠΈ Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Π΅Π³ΠΎ.

Π”ΠΎΠ±Ρ€ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ суток всСм ΠΆΠ΅Π»Π°ΡŽΡ‰ΠΈΠΌ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΈ ΡƒΡΠ²ΠΎΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½ΠΎΠ²ΠΎΠ΅! Π’Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΎΠ±Ρ€Π°Ρ‰Π°Π»ΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° внСшний Π²ΠΈΠ΄ сайтов, ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… создатСли полСнились ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ страниц? И я ΠΎΠ±Ρ€Π°Ρ‰Π°Π». Π­Ρ‚ΠΎ выглядит ΡƒΠ±ΠΎΠ³ΠΎ. Часто ΠΈΠ·-Π·Π° отсутствия ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Ρ… Π½Π°ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Π²ΠΈΠ΄Π°ΠΌΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ½Π° ΡΠΌΠ΅ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ ΠΈ просто ΠΎΡ‚ΠΏΠ°Π΄Π°Π΅Ρ‚ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π΄Π°Π»Π΅Π΅ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° Ρ‚Π°ΠΊΠΎΠΌ Π²Π΅Π±-рСсурсС.

Π§Ρ‚ΠΎΠ± Ρ‚Π°ΠΊΠΎΠΉ Π±Π΅Π΄Ρ‹ Π½Π΅ ΡΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ с вашим ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ я Ρ€Π΅ΡˆΠΈΠ» Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ Π½Π° Ρ‚Π΅ΠΌΡƒ: «Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ страницы Π² htmlΒ». ΠŸΡ€ΠΎΡ‡ΠΈΡ‚Π°Π² ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΡŽ, Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ°ΠΊΠΈΡ… инструмСнтов ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ фиксированным ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠΌΡΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ваш сайт. А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°Ρ‡Π½Π΅ΠΌ!

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ инструмСнты для задания Ρ„ΠΎΠ½Π° Π²Π΅Π±-страниц

Для установки Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ Π²Π΅Π±-языков Π±Ρ‹Π» прСдусмотрСн Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ background. Он имССтся ΠΊΠ°ΠΊ Π² html, Ρ‚Π°ΠΊ ΠΈ Π² css.

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

Π’Π°ΠΊ, для установки Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Ρ‡Π΅Ρ€Π΅Π· Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ html <body> достаточно Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄: <body background=»адрСс Ρ„Π°ΠΉΠ»Π°Β»>. </body> ΠΈ вмСсто слов «адрСс Ρ„Π°ΠΉΠ»Π°Β» Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅.

Однако Π·Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅! Если Π² Π²ΠΈΠ΄Π΅ Ρ„ΠΎΠ½Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΡ‚ΠΎΠ½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΡ‚Π½ΠΎ, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ², Ρ‚ΠΎ это дСлаСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° bgcolor.

НапримСр, <body bgcolor=Β»#000000β€³>. </body>, ΠΌΡ‹ Π·Π°Π΄Π°Π»ΠΈ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ для нашСго сайта.

Π¦Π²Π΅Ρ‚Π° Π² css ΠΈ html Π·Π°Π΄Π°ΡŽΡ‚ΡΡ Π»ΠΈΠ±ΠΎ английским словом (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, red), Π»ΠΈΠ±ΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ состоит ΠΈΠ· Π·Π½Π°ΠΊΠ° # ΠΈ ΡˆΠ΅ΡΡ‚ΠΈ символов послС Π½Π΅Π³ΠΎ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, #FFDAB9).

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

Background ΠΊΠ°ΠΊ свойство Π² каскадных стилСвых Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ…

Он задаСтся ΠΈΠ»ΠΈ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅ с css стилями, ΠΈΠ»ΠΈ Π² элСмСнтС <style>. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ рисунки ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚, ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ мСстополоТСниС Π½Π° страницС, Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ ΠΈ фиксированныС изобраТСния. Для большСй наглядности я ΠΎΡ„ΠΎΡ€ΠΌΠΈΠ» опрСдСлСния Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ΠŸΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
background-attachmentΠ˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки фиксированного ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ изобраТСния вмСстС с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ сайта. Π‘Ρ‹Π²Π°Π΅Ρ‚ fixed, scroll ΠΈ inherit
background-imageΠ—Π°Π΄Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°. ΠœΠΎΠΆΠ΅Ρ‚ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ с Ρ†Π²Π΅Ρ‚ΠΎΠΌ. Π’ΠΎΠ³Π΄Π° послСдний Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π΅ загрузится ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°
background-positionΠ—Π°Π΄Π°Π΅Ρ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ располоТСниС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° для ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ указываСтся right, left ΠΈ center, Π° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ – bottom, top ΠΈ center. Помимо этого, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (inherit), Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ…, пиксСлях ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… размСрностях
background-repeatΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΏΡ€ΠΈ использовании Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° background-image. Π Π΅Π³Π»Π°ΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. МоТно ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ 2 значСния: для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ характСристики: no-repeat, repeat, repeat-x, repeat-y, inherit, space
background-colorУстанавливаСт Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π° ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹. Π¦Π²Π΅Ρ‚ наслСдника всСгда совпадаСт с Ρ†Π²Π΅Ρ‚ΠΎΠΌ элСмСнта-ΠΏΡ€Π΅Π΄ΠΊΠ°.
inheritНаслСдуСт всС характСристики Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта

ВрСмя для практичСского занятия

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

Π˜Ρ‚Π°ΠΊ, ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°ΠΌΠΈ стоит Π·Π°Π΄Π°Ρ‡Π° ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ: Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ изобраТСния. ΠŸΡ€ΠΈ этом gif-анимация Π±ΡƒΠ΄Π΅Ρ‚ фиксирована, Π° рисунок ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ вмСстС с содСрТимым страницы.

Π’Π°ΠΊΠΆΠ΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π±Π»ΠΎΠΊΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ fixed ΠΈ scroll. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ΠΉΠ΄Π΅Ρ‚!

На этой Π½ΠΎΡ‚Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Ρ‹Ρ‚ΠΎΠΆΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ Ρ€Π°Π±ΠΎΡ‚Ρƒ. ВступайтС Π² ряды ΠΌΠΎΠΈΡ… Π²Π΅Ρ€Π½Ρ‹Ρ… подписчиков, Π·Π°Π΄Π°Π²Π°ΠΉΡ‚Π΅ вопросы, Ссли Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ нСпонятно, ΠΈ Π½Π΅ ΠΆΠ°Π΄Π½ΠΈΡ‡Π°ΠΉΡ‚Π΅ ссылкой Π½Π° ΠΌΠΎΠΉ Π±Π»ΠΎΠ³, Π° Π΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ Сю с Π΄Ρ€ΡƒΠ·ΡŒΡΠΌΠΈ. Π–Π΅Π»Π°ΡŽ приятного обучСния. Пока-ΠΏΠΎΠΊΠ°!

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ„ΠΎΠ½ΠΎΠΌ Π² html, ΠΊΠΎΠ΄, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, background, image.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² зависимости ΠΎΡ‚ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π° вСсь экран, Π»ΠΈΠ±ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ всСго лишь Ρ‡Π°ΡΡ‚ΡŒ!

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ нСсколькими способами:

1.Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Π² саму страницу.

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ это Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ, Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ страницу для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°.

Как ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ страницы?

ΠŸΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ Π² самой страницС ΠΊΠΎΠ΄ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π°.

ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, для этого Π΅ΡΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ:

ИзмСним ΠΊΠΎΠ΄ Π½Π° страницС:

Код страницы Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠΉ:

Π‘ использованиСм стилСй css, Π½ΠΎ всС Ρ€Π°Π²Π½ΠΎ Π² самой страницС.

ПослС Ρ‚ΠΈΡ‚Π»ΠΎΠ² вставляСм Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄:

Код страницы Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠΉ:

Как ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css.

Π—Π΄Π΅ΡΡŒ имССтся Π²Π²ΠΈΠ΄Ρƒ css = ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» css.

2.Π—Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ с помошью css.

Для этого Π½Π°ΠΌ потрСбуСтся:

А.Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» стилСй css .
Π‘.ΠŸΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ с Π·Π°Π΄Π½ΠΈΠΌ Ρ„ΠΎΠ½ΠΎΠΌ Π° Ρ„Π°ΠΉΠ»Π΅ стилСй.
>Π’.ΠŸΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» стилСй css ΠΊ нашСй страницС.
А.

Для использования css для Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π°, создадим ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» стилСй css, Π½Π°Π·ΠΎΠ²Ρ‘ΠΌ Π΅Π³ΠΎ

Π’ самом Ρ„Π°ΠΉΠ»Π΅ стилСй css, Π΄Π΅Π»Π°Π΅ΠΌ Ρ‚Π°ΠΊΡƒΡŽ надпись:

ΠŸΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΠΌ Π΅Π³ΠΎ ΠΊ страницС, написав Ρ‚Π°ΠΊΠΎΠΉ тСкст Π½ΠΈΠΆΠ΅ Ρ‚ΠΈΡ‚Π»ΠΎΠ²:

<link rel=»stylesheet» href=»http://axmara.narod.ru/_page/primer/zadniy_fon_kartinka.css» type=»text/css»>

Код страницы Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠΉ:

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ.

Если Ρƒ вас Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ большС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Ρ‚ΠΎ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒΡΡ, Π° ΠΊΠ°ΠΊ это Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΊΠ°ΠΊ-Ρ‚ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ€Π°Π·!

Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ способами Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠ΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ с рисунка Π½Π° Π·Π°Π»ΠΈΠ²ΠΊΡƒ, ΠΈ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ Π½Π° вСсь экран

Π–Π΅Π»Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, вСдь хочСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΏΠΎ-настоящСму своим, Ρ‚Π°ΠΊΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎΡ‚Ρ€Π°ΠΆΠ°Π»ΠΎ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€ ΠΈ настроСниС, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎ ΠΎ Π΄ΠΎΡ€ΠΎΠ³ΠΈΡ… Π»ΡŽΠ΄ΡΡ… ΠΈ Π²Ρ‹Π·Ρ‹Π²Π°Π»ΠΎ Π±ΡƒΡ€ΡŽ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… эмоций. Но Π½Π΅ всС Π·Π½Π°ΡŽΡ‚, ΠΊΠ°ΠΊ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол Windows 10. Данная ΡΡ‚Π°Ρ‚ΡŒΡ расскаТСт ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… способах Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΏΠΎΡΡ‚Π°Π²Π»Π΅Π½Π½ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ.

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

  1. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ настройки Π² Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… систСмы»
  2. Установка Π² качСствС Ρ„ΠΎΠ½Π° сплошной Π·Π°Π»ΠΈΠ²ΠΊΠΈ вмСсто Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ
  3. Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠ±ΠΎΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ»ΠΈΠΊ ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅
  4. ΠŸΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ„ΠΎΠ½ Ρ‡Π΅Ρ€Π΅Π· Β«ΠŸΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΒ»
  5. Π‘ΠΌΠ΅Π½Π° оформлСния дСсктопа Ρ‡Π΅Ρ€Π΅Π· Internet Explorer
  6. Π‘ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок Ρ‡Π΅Ρ€Π΅Π· Mozilla Firefox
  7. ИзмСнСниС оформлСния Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Β«Π€ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈΒ»

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ настройки Π² Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… систСмы»

ИзмСнСниС Ρ„ΠΎΠ½Π° β€” это ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ настройка, поэтому инструмСнт для Π½Π΅Ρ‘ находится Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«ΠŸΠ΅Ρ€ΡΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡΒ», находящийся Π² Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… систСмы». Π§Ρ‚ΠΎΠ±Ρ‹ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎ:

1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ возмоТности Β«ΠŸΡƒΡΠΊΠ°Β», Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° Β«ΡˆΠ΅ΡΡ‚Π΅Ρ€Ρ‘Π½ΠΊΡƒΒ» Π² Π»Π΅Π²ΠΎΠΉ части для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΊ Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΒ», Ρ€Π°ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π» ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… настроСк.

2. Намного быстрСС ΠΈ ΠΏΡ€ΠΎΡ‰Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²Ρ‹ΠΉ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ пустому пространству дСсктопа ΠΈ Π² появившСмся мСню Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ самый послСдний Π² спискС) ΠΏΡƒΠ½ΠΊΡ‚ Β«ΠŸΠ΅Ρ€ΡΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡΒ».

3. Π’ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ€Π°Π·Π΄Π΅Π» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· «ПанСль управлСния», пСрСйдя Π² Π½Π΅Ρ‘ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ поиска Π½Π° «ПанСли Π·Π°Π΄Π°Ρ‡Β».

Π”Π°Π»Π΅Π΅, Ρ‡Π΅Ρ€Π΅Π· список элСмСнтов, располоТСнный Π² Π»Π΅Π²ΠΎΠΉ части ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅Π³ΠΎΡΡ ΠΎΠΊΠ½Π°, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»Ρƒ Β«Π€ΠΎΠ½Β», просто Ρ‰Ρ‘Π»ΠΊΠ½ΡƒΠ² ΠΏΠΎ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ названию. ИмСнно Ρ‚Π°ΠΌ ΠΏΠΎΠ΄ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ΠΎΠΉ, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅ΠΉ дСсктоп, ΠΈ находится Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ инструмСнт. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ:

1. Π’ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ спискС слСдуСт Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«Π€ΠΎΡ‚ΠΎΒ».

2. НиТС ΠΈΠ· ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… систСмой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ стандартный Ρ„ΠΎΠ½ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΡƒ Β«ΠžΠ±Π·ΠΎΡ€Β» для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΊ собствСнному Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Ρƒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°ΠΉΡ‚ΠΈ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ рисунок ΠΈΠ»ΠΈ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ (доступныС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ JPG ΠΈ JPEG, BMP, PNG ΠΈ GIF).

3. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

4. ΠžΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° дСсктопС, Π²Ρ‹Π±Ρ€Π°Π² ΠΎΠ΄Π½Ρƒ ΠΈΠ· ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ исходного Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π·Π°ΠΌΠΎΡΡ‚ΠΈΡ‚ΡŒ малСнькими копиями всё пространство, Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π½Π° вСсь экран, Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊΡƒΡŽ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΎΠ½ Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС, Ρ‚ΠΎΠ³Π΄Π° ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ настройку Β«Π‘Π»Π°ΠΉΠ΄-ΡˆΠΎΡƒΒ», ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ· Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка ΠΏΠΎΠ΄ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ΠΎΠΉ.

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

Установка Π² качСствС Ρ„ΠΎΠ½Π° сплошной Π·Π°Π»ΠΈΠ²ΠΊΠΈ вмСсто Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ

Компания Β«ΠœΠ°ΠΉΠΊΡ€ΠΎΡΠΎΡ„Ρ‚Β» ΠΏΠΎΠ΄ΡƒΠΌΠ°Π»Π° ΠΈ ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΡ…, ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‰ΠΈΡ… минималистичный Π΄ΠΈΠ·Π°ΠΉΠ½, прСдоставив ΠΈΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС оформлСния дСсктопа сплошной Ρ†Π²Π΅Ρ‚, Π° Π½Π΅ Ρ„ΠΎΡ‚ΠΎ. Для этого Π½Π°Π΄ΠΎ:

  1. Π’ Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«Π€ΠΎΠ½Β» ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… настроСк Π² Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… систСмы» ΠΈΠ· Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ «Бплошной Ρ†Π²Π΅Ρ‚Β»;
  2. Из ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… систСмой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ оформлСния Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠΈΠΉΡΡ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ спСктру, Π½Π°ΠΆΠ°Π² Π½Π° Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ссылку с плюсиком Β«Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚Β»;
  3. ΠžΡ†Π΅Π½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π² ΠΎΠΊΠ½Π΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра.

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠ±ΠΎΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ»ΠΈΠΊ ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅

Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΆΠ΅Π»Π°Π΅Ρ‚ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° дСсктопС ΠΊΠ°ΠΊΡƒΡŽ-Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ, Ρ‚ΠΎ Π΅ΠΌΡƒ слСдуСт:

1. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎ Π½Π΅ΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ ΠΌΡ‹ΡˆΡŒΡŽ.

2. Из дСйствий, ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… систСмой Π² контСкстном мСню, Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ Β«Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола».

Π”Π°Π½Π½Ρ‹ΠΉ способ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ всСгда, Π΄Π°ΠΆΠ΅ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Windows 10 Π΅Ρ‰Ρ‘ Π½Π΅ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π½Π°.

ΠŸΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ„ΠΎΠ½ Ρ‡Π΅Ρ€Π΅Π· Β«ΠŸΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΒ»

Если стандартныС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ систСмы каТутся «нСдостойными» ΡƒΠΊΡ€Π°ΡˆΠ°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ:

1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Β«ΠŸΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΒ» Ρ‡Π΅Ρ€Π΅Π· Π·Π½Π°Ρ‡ΠΎΠΊ Π² Π²ΠΈΠ΄Π΅ ΠΏΠ°ΠΏΠΎΡ‡ΠΊΠΈ Π½Π° «ПанСли Π·Π°Π΄Π°Ρ‡Β».

2. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡΡΡŒ ΠΏΠΎ ΠΏΠ°ΠΏΠΊΠ°ΠΌ Π½Π°ΠΉΡ‚ΠΈ Π² Π½Π΅Π΄Ρ€Π°Ρ… Π½ΡƒΠΆΠ½ΠΎΠ΅ Ρ„ΠΎΡ‚ΠΎ ΠΈΠ»ΠΈ рисунок.

3. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ «БрСдства Ρ€Π°Π±ΠΎΡ‚Ρ‹ с рисунками» Π² мСню ΠΏΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΠ°.

3. Π©Ρ‘Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΊΠΈ.

4. НаТмитС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ фоновым…» Π½Π° Ρ‚ΠΎΠΉ ΠΆΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅.


Π‘ΠΌΠ΅Π½Π° оформлСния дСсктопа Ρ‡Π΅Ρ€Π΅Π· Internet Explorer

Если Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ ΠΈΠ»ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠ΅ Π½Π΅Ρ‚ подходящих ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‚ΠΎ ΠΈΡ… Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Π•Ρ‰Ρ‘ этот способ Π°ΠΊΡ‚ΡƒΠ°Π»Π΅Π½ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½Π΅ успСл ΠΈΠ»ΠΈ ΠΏΠΎ ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ Π½Π΅ смог Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свою Windows 10. Π’ этом случаС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ:

1. Π—Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Internet Explorer.

2. Найти Π½Π° просторах «ВсСмирной ΠΏΠ°ΡƒΡ‚ΠΈΠ½Ρ‹Β» ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΡΡ‰ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ.

3. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° Π½Π΅ΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅.

4. Π•Ρ‰Ρ‘ Ρ€Π°Π· ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ ΠΈ ΡΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠ²Π°Ρ‚ΡŒ систСмС Β«Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ рисунком».

5. ΠŸΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π”Π°Β».

Π‘ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок Ρ‡Π΅Ρ€Π΅Π· Mozilla Firefox

ΠŸΠ΅Ρ€ΡΠΎΠ½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Ρ‡Π΅Ρ€Π΅Π· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Mozilla Firefox. Для этого Π½Π°Π΄ΠΎ:

1. Π—Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΎΠ±ΠΎΠ·Ρ€Π΅Π²Π°Ρ‚Π΅Π»ΡŒ.

2. ВвСсти Π² Π΅Π³ΠΎ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡƒΡŽ строку Ρ„Ρ€Π°Π·Ρƒ Β«ΠΎΠ±ΠΎΠΈ для Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола».

3. Β«ΠŸΠΎΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒΒ» ΠΏΠΎ сайтам, ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌ Π² Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ… поиска, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ срСди бСсчислСнного мноТСства ΠΎΠ±ΠΎΠ΅Π² Ρ‚Π΅, Ρ‡Ρ‚ΠΎ придутся ΠΏΠΎ Π΄ΡƒΡˆΠ΅, ΠΈΠ»ΠΈ сразу ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈΒ».

Если Π²Ρ‹Π±Ρ€Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ:

1. Π©Ρ‘Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π½Π° Π½Ρ‘ΠΌ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΊΠΈ.

2. ΠΠ°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ мСню Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ рисунком.

3. ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· появившийся мастСр располоТСниС ΠΈ Ρ†Π²Π΅Ρ‚.

4. ΠŸΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ дСйствиС, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π²Π½ΠΈΠ·Ρƒ мастСра.

Если ΠΈΡ… нСсколько, Ρ‚ΠΎ трСбуСтся:

5. ΠŸΠΎΡΡ€Π΅Π΄ΡΡ‚Π²ΠΎΠΌ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈ Π²Ρ‹Π±ΠΎΡ€Π° ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒβ€¦Β» ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΈΡ… Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€.

6. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ Π·Π°Π³Ρ€ΡƒΠ·ΠΎΠΊ, ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС скачанныС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈΠ· Π½ΠΈΡ….

7. ΠŸΡ€Π°Π²Ρ‹ΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΈ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π΅Ρ‘ Ρ„ΠΎΠ½ΠΎΠΌ.

8. Если Π²Ρ‹Π±ΠΎΡ€ слоТСн, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, хочСтся всё сразу, Ρ‚ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:

  • ΠΎΠ±Ρ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΡ… Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ, протягиваСмым ΠΌΡ‹ΡˆΡŒΡŽ;
  • Π½Π°ΠΆΠ°Ρ‚ΡŒ Shift Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅, ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ ΠΈ послСднСму графичСскому Ρ„Π°ΠΉΠ»Ρƒ;
  • Π·Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Ctrl ΠΈ ΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒ ΠΈΠ·Π±ΠΈΡ€Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠΈΠΌΡΡ элСмСнтам.

9. На Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΠ»ΠΈΠΊ ΠΌΡ‹ΡˆΡŒΡŽ.

10. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ ΠΊΠΎΠΌΠ°Π½Π΄Π΅ Β«Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠΌΒ», прописанной Π² контСкстном мСню.

Π’ этом случаС всС Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΎΡ‡Π΅Ρ€Ρ‘Π΄Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ активизируСтся ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ настройка Β«Π‘Π»Π°ΠΉΠ΄-ΡˆΠΎΡƒΒ».

ИзмСнСниС оформлСния Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Β«Π€ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈΒ»

Π’ «дСсяткС», ΠΊΠ°ΠΊ ΠΈ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… вСрсиях, Π΅ΡΡ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ систСмноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Β«Π€ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈΒ», ΠΏΠΎΠ»ΡŒΠ·ΡƒΡΡΡŒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° дСсктопС. Для этого трСбуСтся:

1. Π—Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, вписав Π² ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡƒΡŽ строку Β«ΠŸΡƒΡΠΊΠ°Β» ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

2. НайдитС Π² Π΅Π³ΠΎ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π°Ρ… ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ Ρ„ΠΎΡ‚ΠΎ.

3. Если Π΅Π³ΠΎ Ρ‚Π°ΠΌ Π½Π΅Ρ‚, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

4. ΠŸΠΎΠ»ΡŒΠ·ΡƒΡΡΡŒ Β«ΠŸΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΠΎΠΌΒ», Π½Π°ΠΉΡ‚ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° ПК.

5. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° Π½Π΅ΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΠ»ΠΈΠΊ ΠΌΡ‹ΡˆΡŒΡŽ.

6. Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ Β«ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽβ€¦Β».

7. Π£ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для открытия Β«Π€ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈΒ».

8. Π©Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅ΠΉ Ρ‚Ρ€ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ располоТСнных Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ основноС мСню ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.

9. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΠΈΠ· списка Β«Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ как…».

10. БистСма ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² (ΠΏΠ»ΠΈΡ‚ΠΊΠ° прилоТСния, экран Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ), Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Β«Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ рисунком».

11. Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ вступлСниС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² силу.

Π§Π΅Ρ€Π΅Π· Β«Π€ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈΒ» Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π· слайдов ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… снимков. Для этого Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ нСсколько Ρ„ΠΎΡ‚ΠΎ, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΡ… всС ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прилоТСния, Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ впослСдствии Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Β«Π‘Π»Π°ΠΉΠ΄-ΡˆΠΎΡƒΒ».

HTML Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π±Π΅Π· CSS

ПослСднСС ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅: 8 апрСля 2022 Π³.

IN — HTML

Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ HTML Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π±Π΅Π· CSS, Π² HTML Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ свойств ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠœΡ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Π² html Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Ρ„ΠΎΠ½Π°, Π½ΠΎ Ρƒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Ρ„ΠΎΠ½Π°.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π° экрана Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния остаСтся ΠΏΡ€Π΅ΠΆΠ½ΠΈΠΌ. ΠžΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ всС Ρ‚Π΅Π»ΠΎ всСй Π²Π΅Π±-страницы. И ΠΌΡ‹ сдСлали это Π±Π΅Π· использования CSS.

ПошаговоС руководство ΠΏΠΎ HTML Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ Π±Π΅Π· CSS :-

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ способов ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Ρ„ΠΎΠ½Π° Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅. Но ΠΌΡ‹ Π½Π°ΡƒΡ‡ΠΈΠΌ вас Ρ‚ΠΎΠΌΡƒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ вСсь экран.

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

 

<Π³ΠΎΠ»ΠΎΠ²Π°>
 НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°<title>
</Π³ΠΎΠ»ΠΎΠ²Π°>
<body background-image="demo10/logo.jpg" background-repeat="no-repeat" background-size="cover">
</Ρ‚Π΅Π»ΠΎ>
</html> </pre><ol><li> Π‘Π½Π°Ρ‡Π°Π»Π° ΠΌΡ‹ пишСм <! DOCTYPE html>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ использовали ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΎ Ρ‚ΠΎΠΌ, Π² ΠΊΠ°ΠΊΠΎΠΉ вСрсии HTML-Ρ„Π°ΠΉΠ»Π° записан Ρ„Π°ΠΉΠ».<img loading="lazy" src="/800/600/http/impuls-web.ru/wp-content/uploads/2018/06/bg-color-7.jpg"><noscript><img loading='lazy' src='/800/600/http/impuls-web.ru/wp-content/uploads/2018/06/bg-color-7.jpg' /></noscript><div id="yandex_rtb_2" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744154-3";}
else{var rtbBlockID="R-A-744154-5";}
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_2",blockId:rtbBlockID,pageNumber:2,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");}
g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_2").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_2");if(ins.clientHeightΒ =="0"){ins.innerHTML=stroke3;}},true);</script> </li><li> Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, Ρ‚Π΅Π³<html> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для обозначСния Π½Π°Ρ‡Π°Π»Π° HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.</li><li> Как ΠΈ Π²Ρ‹ΡˆΠ΅, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρ‚Π΅Π³<head> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для хранСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π²Π΅Π±-страницС. Π’ этом Ρ‚Π΅Π³Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³<title>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-страницы. Оба Ρ‚Π΅Π³Π°<head> ΠΈ<title> ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠ°Ρ€Π½Ρ‹ΠΌΠΈ Ρ‚Π΅Π³Π°ΠΌΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρƒ ΠΎΠ±ΠΎΠΈΡ… Π΅ΡΡ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ</head> ΠΈ соотвСтствСнно.
  • Π’-Ρ‚Ρ€Π΅Ρ‚ΡŒΠΈΡ…, Ρ‚Π΅Π³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния Ρ‚Π΅Π»Π° Π²Π΅Π±-страницы. ВсС содСрТимоС для отобраТСния Π½Π° Π²Π΅Π±-сайтС написано здСсь. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ создаСм Ρ‚Π΅Π³ body, Π½ΠΎ Π²Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Π² Ρ‚Π΅Π»Π΅ Π½Π΅Ρ‚ Ρ‚Π΅Π³Π° изобраТСния img. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Ρ„ΠΎΠ½Π° Π²Π΅Π±-страницы. Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ html здСсь, Π² Ρ‚Π΅Π³Π΅ body, ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ свойство CSS.
  • ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ свойством, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ здСсь, являСтся Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки изобраТСния Π² качСствС Ρ„ΠΎΠ½Π°. URL-адрСс изобраТСния ΡƒΠΊΠ°Π·Π°Π½ Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ.
  • Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ β€” background-repeat, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΆΠ΅ обсуТдался Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ сСансС. Π­Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ нашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ»ΠΎΡΡŒ снова ΠΈ снова.
  • ПослСдний ΠΈ самый Π²Π°ΠΆΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ здСсь, это background-size, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ фиксируСтся Π² Ρ„ΠΎΠ½Π΅ ΠΈ Π½Π΅ мСняСтся само ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ Π²Π΅Π±-страницы. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ даСтся, являСтся ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ΠΌ.
  • ВсС это дСлаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ встроСнных Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² html. Π—Π° этим html-ΠΊΠΎΠ΄ΠΎΠΌ Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° CSS.
  • НаконСц, Ρ‚Π΅Π³ΠΈ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈ соотвСтствСнно.
  • Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ :-

    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅, здСсь ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Ρ„ΠΎΠ½Π° Π½Π° вСсь экран.

    Π Π°Π·ΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана, ΠΈ этот ΠΊΠΎΠ΄ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ вСсь экран Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана. Π― надСюсь, Ρ‡Ρ‚ΠΎ этот ΡƒΡ€ΠΎΠΊ ΠΏΠΎ полноэкранному Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ HTML Π±Π΅Π· CSS ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ.

    ΠŸΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½Ρ‹Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ изобраТСния Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS 2 способа

    Π’ Π½Π΅Π΄Π°Π»Π΅ΠΊΠΎΠΌ ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° jQuery Π±Ρ‹Π» Ρ†Π°Ρ€Π΅ΠΌ Π³ΠΎΡ€Ρ‹, Π° CSS3 всС Π΅Ρ‰Π΅ заслуТивал Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ Π½Π°Π·Ρ‹Π²Π°Π»ΠΈ Ρ‚Π°ΠΊΠΎΠ²Ρ‹ΠΌ, самым популярным инструмСнтом для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π±Ρ‹Π» ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Backstretch jQuery. .

    Π― использовал этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π½Π° 30 сайтах Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ стало большС ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ свойство (ΠΎΠ½ ΠΆΠ΅ IE < 9 тСряСт ΠΎΠ±Ρ‰ΡƒΡŽ долю Ρ€Ρ‹Π½ΠΊΠ°):

     background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°; 

    Богласно caniuse.com, это свойство ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π±ΠΎΠ»Π΅Π΅ 9Π³ΠΎΠ΄Ρ‹! Но Π²Π΅Π±-сайты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ связаны с использованиСм Backstretch ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ собствСнного Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΅Ρ‰Π΅ Π½Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Ρ‹.

    ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ стандартный Ρ‚Π΅Π³ img ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ магию:

    ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: ΠΊΡ€Ρ‹ΡˆΠΊΠ°;

    Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΈ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠΎΠ³Π΄Π° Π»ΡƒΡ‡ΡˆΠ΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π½ΠΈΡ….

    ИспользованиС

    background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°

    #

    Π’ Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ дСсяти Π»Π΅Ρ‚ я занимался созданиСм настраиваСмых Ρ‚Π΅ΠΌ WordPress ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Π²Π΅Π±-сайтов. Π˜Ρ‚Π°ΠΊ, Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚, Π²ΠΎΡ‚ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ использованиС background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ° раствор.

    Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, HTML, Π³Π΄Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ вставлСно Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ стиля ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ . РСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ aria-label вмСсто Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° alt , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ присутствуСт Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ Ρ‚Π΅Π³Π΅ img .

     

    class="card__img"
    aria-label="ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° Whizzbang"
    style="background-image: url(https://placeimg.com/320/240/tech)"
    >


    Whizzbang Widget SuperDeluxe



    ΠšΠΎΠ½Ρ„Π΅Ρ‚Ρ‹ ΠΈΠ· Π»Π°ΠΊΡ€ΠΈΡ†Ρ‹ ΠΈ ΠΆΠ΅Π»Π΅ΠΉΠ½ΠΎ-суфлС с ΠΌΠΈΠ½Π΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠ΅Ρ‡Π΅Π½ΡŒΠ΅ΠΌ. ΠšΠΎΠ½Ρ„Π΅Ρ‚Ρ‹ ΠΌΠΎΡ€ΠΎΠΆΠ΅Π½ΠΎΠ΅ бисквитно-ΠΌΠ°Ρ€Ρ†ΠΈΠΏΠ°Π½ΠΎΠ²Ρ‹Π΅. Macaroon
    ΠΏΠΈΡ€ΠΎΠ³ с ΠΊΡƒΠ½ΠΆΡƒΡ‚ΠΎΠΌ ΠΈ ΠΆΠ΅Π»Π΅.


    Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ

    Π‘ΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ CSS Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ, Π³Π΄Π΅ padding-bottom β€” это ΠΎΠ΄ΠΈΠ½ странный Ρ‚Ρ€ΡŽΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ 16:9 Π² div, содСрТащСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:

     .card__img { 
    background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
    background-position: Ρ†Π΅Π½Ρ‚Ρ€;
    // ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ 16:9
    padding-bottom: 62,5%;
    }

    Π’ΠΎΡ‚ это Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ:

    Π‘Ρ‚Π΅Ρ„Π°Π½ΠΈ Π­ΠΊΠ»Π· (@5t3ph)

    ИспользованиС

    ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎΠΉ посадки: ΠΊΡ€Ρ‹ΡˆΠΊΠ°

    #

    Π­Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ являСтся Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²Ρ‹ΠΌ ΠΏΠ»Π΅Π΅Ρ€ΠΎΠΌ ΠΈ нСдоступно для вас, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° IE < Edge 16, согласно Π΄Π°Π½Π½Ρ‹ΠΌ caniuse Π±Π΅Π· ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π»Π°.

    Π­Ρ‚ΠΎΡ‚ ΡΡ‚ΠΈΠ»ΡŒ размСщаСтся нСпосрСдствСнно Π½Π° img , поэтому ΠΌΡ‹ обновляСм HTML-ΠΊΠΎΠ΄ нашСй ΠΊΠ°Ρ€Ρ‚Ρ‹ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, замСняя aria-label Π½Π° alt :

    .
     

    class="card__img"
    alt="ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° Whizzbang"
    src="https://placeimg.com/320/240/tech"
    />

    Whizzbang Widget SuperDeluxe



    Π›Π°ΠΊΡ€ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ„Π΅Ρ‚Ρ‹, миндальноС ΠΏΠ΅Ρ‡Π΅Π½ΡŒΠ΅, ΠΆΠ΅Π»Π΅ΠΉΠ½Ρ‹ΠΉ Ρ‚ΠΎΡ€Ρ‚. ΠšΠΎΠ½Ρ„Π΅Ρ‚Ρ‹ ΠΌΠΎΡ€ΠΎΠΆΠ΅Π½ΠΎΠ΅ бисквитно-ΠΌΠ°Ρ€Ρ†ΠΈΠΏΠ°Π½ΠΎΠ²Ρ‹Π΅. Macaroon
    ΠΏΠΈΡ€ΠΎΠ³ с ΠΊΡƒΠ½ΠΆΡƒΡ‚ΠΎΠΌ ΠΈ ΠΆΠ΅Π»Π΅.


    Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ

    Π—Π°Ρ‚Π΅ΠΌ наш ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ CSS ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π½Π° использованиС свойства height для ограничСния изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° соотвСтствовало ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΌΡƒ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ. Если собствСнный Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния большС, Ρ‡Π΅ΠΌ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния, свойство object-fit Π±Π΅Ρ€Π΅Ρ‚ Π²Π΅Ρ€Ρ… ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ…, созданных ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ ΠΊΠ°Ρ€Ρ‚Ρ‹ + ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ высоты :

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

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

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