Скажімо, ви хочете розмістити зображення або два на веб-сторінці. Один із способів - використовувати background-imageвластивість CSS.
Ця властивість застосовує одне або кілька фонових зображень до елемента, наприклад, як , як пояснюється в документації. Використовуйте його з естетичних міркувань, наприклад, додавши текстурований фон до вашої веб-сторінки.
Додайте зображення
За допомогою background-imageвластивості легко додати зображення . Просто вкажіть шлях до зображення у url()значенні.
Шлях до зображення може бути URL-адресою, як показано в прикладі нижче:
div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } Або це може бути локальний шлях. Ось приклад:
body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } Додайте кілька зображень
Ви можете застосувати до зображення кілька зображень background-image.
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } Це багато коду. Давайте розберемо це.
Відокремте кожне url()значення зображення комою.
background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); Тепер розташуйте та покрастіть свої зображення, застосувавши додаткові властивості.
background-repeat: no-repeat, no-repeat; background-position: right, left; Існує кілька підвластивостей, які можна додати до фонових зображень, таких як background-repeatі background-position, які ми використовували у наведеному вище прикладі. Ви навіть можете додати градієнти до фонового зображення.
Подивіться, як це виглядає, коли ми складаємо все разом.
Питання замовлення
Порядок розміщення ваших зображень у питаннях через порядок укладання. Це означає, що перше вказане зображення є найближчим до користувача, згідно з документацією. Потім, наступний, і наступний тощо.
Ось приклад.
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } Ми вказали два зображення у коді вище. Перше зображення (morocco-blue.png) буде перед другим (oriental-tile.png). Обидва зображення мають однаковий розмір і не мають прозорості, тому ми бачимо лише перше зображення.
Але якщо ми перемістимо друге зображення (oriental-tile.png) праворуч на 200 пікселів, то ви зможете побачити його частину (решта залишається прихованою).
Ось як це виглядає, коли ми складаємо все разом.
Коли слід використовувати фонове зображення?
background-imageВласність має що сподобатися . Але є недолік.
Зображення може бути недоступне для всіх користувачів, зазначається в документації, як і для тих, хто використовує зчитувачі з екрана.
Це тому, що ви не можете додавати текстову інформацію до background-imageвластивості. Як результат, зображення буде пропущено читачами з екрану.
Використовуйте background-imageвластивість лише тоді, коли вам потрібно додати якусь прикрасу на вашу сторінку. В іншому випадку використовуйте
Таким чином, ви можете додати текст до елемента зображення, використовуючи altатрибут, який описує зображення. Наданий текст буде підхоплений читачами екрану.
Подумайте про це так: background-imageце властивість CSS, і CSS фокусується на презентації або стилі; HTML фокусується на семантиці або значенні.
Що стосується зображень, у вас є варіанти. Якщо для прикраси потрібне зображення, то background-imageмайно може бути хорошим вибором для вас.
Я пишу про те, як навчитися програмувати та про найкращі способи цього зробити ( amymhaddad.com).