Що називається тлом

Морфологія: (ні) чого? фону, Чому? фону, (бачу) що? фон, Чим? фоном, про що? про фон; мн. що? фони, (Ні) чого? фонів, Чому? фонам, (бачу) що? фони, Чим? фонами, про що? про фони

1. Фоном називається основний колір, тон, яким зроблено малюнок, візерунок тощо. на тканини, на грошових купюрах тощо.

На блакитному тлі білі квіти.

2. У картині, ескізі тлом називається задній план зображення, колір, насиченість та інші якості якого сприяють виділенню головних елементів композиції (наприклад, фігури людини у портреті).

Золотий фон ікон. | Розташовуватися на тлі чогось. | Натюрморт поставлений те щоб предмети виділялися темному тлі драпірування.

3. Фоном називається задній план якогось виду, природного пейзажу, у якому вимальовується, виділяється те, що є предметом розгляду.

Червоні ягоди суниці на тлі зеленого листя. | Силуети будинків на фоні вечірнього неба. | Мереживо чавунних ґрат чітко вимальовується на тлі жовтого листя.

4. У комп'ютерній графіці тлом називають колір нижнього базового елемента, у якому розташовуються інші об'єкти.

Колекція фону. | Фон документа, домашню сторінку тощо. | Смугастий, градієнт, прозорим фоном.

5. Фоном називають обстановку, середу, оточення, у яких хтось перебуває чи щось відбувається.

Сприятливе, несприятливе тло.

6. Якщо ви говорите про когось, що він виділяється на загальному тлі, то це означає, що ця людина якими-небудь своїми якостями (зростанням, манерою одягатися, інтелектом, рівнем підготовки, ставленням до роботи тощо) дуже відрізняється від тих, хто живе, працює, знаходиться поруч із нею.

7. У медицині тлом називається загальний стан хворого, а також супутнє нездужання, яке, наприклад, посилює перебіг гострого хворобливого стану.

Зміна складу білків жіночого молока і натомість залізодефіцитної анемії.

8. Фоном називаються фізичні, технологічні тощо характеристики, які постійно супроводжують, визначають життя людини.

Екологічні фону. | Радіаційний фон у нормі.

9. Фоном називають тихі перешкоди, які заважають сприймати сигнали в радіоприймачі, телефонній трубці тощо.

Тлумачний словник російської Дмитрієва . Д. В. Дмитрієв. 2003 .

Фон та кордону

У цьому уроці ми розглянемо деякі цікаві можливості, які ви можете зробити за допомогою CSS-властивостей фону та кордонів. Завдяки додаванню градієнтів, фонових зображень та закруглених кутів властивості фону та кордонів дадуть відповідь на багато питань стилізації в CSS.

Необхідні вміння: Базова комп'ютерна грамотність, основне програмне забезпечення, розуміння роботи з файлами, базові знання HTML (див. Введення в HTML) та уявлення про те, як працює CSS (див. Введення в CSS).

Ціль: Навчитися стилізації фону та межі об'єктів.

Стилізація фону в CSS

CSS-властивість background є скороченням для ряду повних властивостей фону, з якими ми познайомимося у цьому уроці. Якщо ви виявите складну властивість background у таблиці стилів, це може здатися важким для розуміння, оскільки одночасно може бути передано так багато значень.

Ми повернемося до того, як працює скорочення пізніше, а поки давайте поглянемо на різні речі, які ви можете робити з фоном у CSS, подивившись окремі властивості background .

Фоновий колір

Властивість background-color визначає колір фону для будь-якого елемента CSS.Властивість приймає будь-який допустимий колір. background-color поширюється сам контент і відступи від нього (padding).

У наведеному нижче прикладі ми використовували різні значення кольору, щоб додати колір фону до блоку, заголовку та елементу .

Пограйте з ними за допомогою будь-якого доступного значення .

Фонове зображення

Властивість background-image дозволяє відображати зображення як фон елемента. У наведеному нижче прикладі ми маємо два блоки — в одному фонове зображення більше, ніж розміри блоку, а в іншому — маленьке зображення зірки.

Цей приклад демонструє дві особливості фонових зображень. За замовчуванням велике зображення не масштабується до розміру блоку, тому ми бачимо лише його невеликий кут, а маленьке зображення повторюється, щоб заповнити весь блок. У нашому випадку було використано зображення однієї маленької зірки.

Примітка: Якщо крім фонового зображення ви додали фоновий колір, зображення відображатиметься над кольором. Спробуйте додати властивість background-color до наведеного вище прикладу, щоб побачити це в дії.

Властивість background-repeat

Властивість background-repeat використовується для керування повтореннями фонового зображення. Доступні значення:

no-repeat – зупиняє повторення фонового зображення у всіх напрямках.

repeat-x - Повторення фонового зображення по горизонталі.

repeat-y - Повторення фонового зображення по вертикалі.

repeat - повторення фонового зображення в обох напрямках. Встановлено за замовчуванням.

Спробуйте ці значення на прикладі нижче. Ми встановили значення no-repeat, тому ви бачите лише одну зірку. Спробуйте різні значення repeat-x і repeat-y — щоб побачити, які ефекти вони роблять.

Зміна розміру фонового зображення

У наведеному вище прикладі у нас є велике зображення, яке зрештою було обрізане, оскільки воно більше, ніж елемент, тлом якого воно є. У цьому випадку ми могли б використовувати властивість background-size , яка може набувати значення довжини або у відсотках, щоб розмір зображення відповідав розміру фону.

Ви також можете використовувати ключові слова:

cover - браузер зробить зображення досить великим, щоб воно повністю заповнило блок, зберігаючи при цьому співвідношення сторін. У цьому випадку частина зображення, швидше за все, опиниться поза блоком.

contain - браузер зробить зображення потрібного розміру, щоб поміститися в блоці. У цьому випадку можуть з'явитися пробіли з обох сторін або згори та знизу зображення, якщо співвідношення сторін зображення відрізняється від співвідношення сторін блоку.

Нижче я застосував значення довжини розмірів зображення. Дивіться, як це спотворило зображення.

У наведеному прикладі я використовував велике зображення з раніше розглянутого прикладу і вказав значення довжини, щоб визначити його розмір всередині блоку. Ви можете подивитися, як це спотворило зображення.

Змініть значення довжини для зміни розміру фону.

Змініть значення довжини background-size: cover або background-size: contain .

Якщо зображення менше розмірів блоку, ви можете змінити значення властивості background-repeat , щоб повторити зображення.

Позиціонування фонового зображення

Властивість background-position дозволяє змінювати позицію, в якій фонове зображення з'являється в блоці. При цьому використовується система координат, у якій лівий верхній кут блоку дорівнює (0,0), а сам блок розташовується вздовж горизонтальної (x) і вертикальної (y) осей.

Примітка: За промовчанням значення background-position дорівнює (0,0) .

Зазвичай властивість background-position задають у вигляді двох послідовних значень - значення по горизонталі, за яким слідує значення по вертикалі.

Ви можете використовувати такі ключові слова, як top і right (з іншими можете ознайомитися на сторінці background-position ):

Допустимі значення довжини та відсоткові:

Ви також можете змішувати значення ключових слів із довжинами або відсотками, наприклад:

І нарешті, ви також можете використовувати синтаксис з чотирма значеннями, щоб вказати відстань від певних країв блоку - одиниця довжини в даному випадку є зміщенням від значення ключового слова. Отже, у CSS нижче ми змістили фон на 20 пікселів зверху та на 10 пікселів праворуч:

Використовуйте наведений нижче приклад, щоб поекспериментувати з цими значеннями та перемістити зірку всередині блоку.

Примітка: background-position — це скорочення для background-position-x і background-position-y, які дозволяють вам встановлювати різні значення положення по осі індивідуально.

Градієнт як фон

Градієнт – при використанні для фону – діє так само, як зображення, і тому задається властивістю background-image.

Ви можете прочитати більше про різні типи градієнтів і про те, що ви можете робити з ними на сторінці MDN для типу даних . Пограти з градієнтами ви можете за допомогою одного з багатьох генераторів градієнтів CSS, доступних в Інтернеті, наприклад цей. Ви можете створити градієнт, а потім скопіювати та вставити його у свій код.

Спробуйте використати різні градієнти на прикладі нижче.У двох блоках відповідно ми маємо лінійний градієнт, розтягнутий на весь блок, і радіальний градієнт із заданим розміром, який тому повторюється.

Декілька фонових зображень

Також можна створювати кілька фонових зображень - просто розділивши значення якості background-image комами.

Коли ви зробите це, буде накладено фонові зображення один на одного. Фонові зображення будуть накладені шарами, де кожне нове тло зображення, перераховане в коді, буде накладатися поверх раніше вказаного зображення.

Примітка: Градієнти можна легко змішувати із звичайними фоновими зображеннями.

Інші властивості background- * також можуть мати значення, розділені комами, як і background-image :

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;

Кожне значення різних властивостей буде відповідати значенням тієї ж позиції в інших властивостях. Вище, наприклад, значення background-repeat для image1 буде no-repeat. Однак що відбувається, коли різні властивості мають різну кількість значень? Відповідь полягає в тому, що менша кількість значень циклічно повторюватиметься - у наведеному вище прикладі є чотири фонових зображення, і тільки два значення background-position . Перші два значення позиції будуть застосовані до перших двох зображень, потім вони будуть циклічно повторюватися - image3 буде присвоєно перше значення позиції, а image4 буде присвоєно друге значення позиції.

Пограємось? У наведеному нижче прикладі я додав два зображення. Щоб продемонструвати порядок накладання, спробуйте змінити порядок фонових зображень у списку.Або пограйте з іншими властивостями, щоб змінити положення, розмір чи повторюваність значень.

Закріплення фону

Інша опція, яку можна застосувати до фону, - це вказати, як він прокручуватиметься при прокручуванні вмісту.

scroll : Примушує елементи фону прокручуватися під час прокручування сторінки Якщо вміст елемента прокручується, фон не переміщується.

fixed : Фіксує елементи фону в області перегляду, щоб він не прокручувався при прокручуванні сторінки або вмісту елемента Фон завжди залишатиметься на тому самому місці на екрані.

local : Це значення було додано пізніше (воно підтримується лише в Internet Explorer 9+, тоді як інші підтримуються в IE4+), тому що значення scroll є досить заплутаним і в багатьох випадках дійсно не робить те, що ви хочете. , до якого він застосований, тому, коли ви прокручуєте елемент, фон прокручується разом із ним.

Властивість background-attachment діє лише тоді, коли є контент для прокручування, тому ми зробили приклад, щоб продемонструвати різницю між трьома значеннями - погляньте на background-attachment.html (також дивися вихідний код тут).

Використання скороченої властивості background

Як я згадував на початку цього уроку, ви часто бачитимете фон, заданий за допомогою властивості background .

При використанні декількох фонів необхідно вказати всі властивості першого фону, а потім додати наступний фон після коми. У наведеному нижче прикладі ми маємо градієнт з розміром та положенням, потім фонове зображення зі значенням no-repeat та положенням, потім колір.

При записі скорочених значень фонового зображення необхідно дотримуватися кількох правил, наприклад:

background-color можна вказувати лише після останньої коми.

Значення background-size можуть бути включені тільки після background-position , розділені символом '/', наприклад: center/80% .

Відвідайте сторінку MDN властивості background , щоб побачити повний опис.

Доступність перегляду

Поміщаючи текст поверх фонового зображення або кольору, ви повинні подбати про те, щоб у вас було достатньо контрасту, щоб текст читався для відвідувачів вашого сайту. Якщо вказується зображення, і текст буде поміщений поверх цього зображення, ви повинні вказати background-color , який дозволить тексту бути розбірливим, якщо зображення не завантажується.

Програми читання з екрана не можуть аналізувати фонові зображення, тому вони мають бути чисто декоративними; будь-який важливий контент повинен бути частиною HTML-сторінки, а не бути у фоні.

Межі

Вивчаючи блокну модель, ми виявили, як межі впливають на розмір нашого блоку. На цьому уроці ми розглянемо, як творчо використовувати кордони. Зазвичай, коли ми додаємо межі до елемента за допомогою CSS, ми використовуємо скорочену властивість, яка встановлює колір, ширину та стиль кордону в одному рядку CSS.

Ми можемо встановити кордон для всіх чотирьох сторін блоку за допомогою border:

Або ми можемо націлюватися на один край блоку, наприклад: