Як у властивості css background задати прозорість
Всім привіт. Як ви можливо знаєте, background - це css-властивість, яке дозволяє задати колір фону або завантажити зображення, яке буде виступати в якості фонового. В CSS3 також з'явилася можливість створення лінійних і радіальних градієнтів, але це тема для окремої статті. У цій же я хотів розповісти, як в css у властивості background задати прозорість.
Задаємо прозорість у css background
Всі ми, вебмастера і розробники, постійно працюємо з сайтами. Хотів би вам порекомендувати майданчики, якими користуюся сам:- Reg.ru - тут реєструю і продовжую доменні імена, дуже надійна компанія!
- HostIQ - хостинг преміум якості.
- Ihor - більш бюджетний, але теж дуже якісний хостинг-провайдер.
- Telderi.ru - єдина надійна біржа в рунеті, на якій можна купити готові сайти з доходом!
Background-color: rgba (173, 57, 22, 0.5)
Спочатку ми явно вказуємо, що задаємо колір в режимі rgba. Потім вказуємо значення насиченості трьох основних кольорів від 0 до 255, де 255 - найбільша насиченість. Четвертий параметр це і є наша прозорість. Тут пишеться значення від 0 до одиниці. 1 - повністю непрозорий елемент, а 0 - повністю прозорий. Відповідно, якщо виставити 0, то фонового кольору не буде видно взагалі.
Тепер ви знаєте, як в css у властивості background задати прозорість. Для цього потрібно використовувати колірний режим rgba. Є ще властивість opacity. але воно застосовується до всього елементу в цілому. Тобто при застосуванні opacity прозорість може застосуватися і до тексту, що зробить його нечитабельним.
Прозорий фон на прикладі
Переваги напівпрозорого фону легко показати на прикладі. Наприклад, у нас є загальне тло сторінки. Ось так би виглядав блок, якби йому було поставлено суцільний чорний колір:
А тепер поставимо це ж чорний колір блоку, але вкажемо його за допомогою колірного формату rgba, вказавши останнє значення в 0.7, наприклад. Вийде так:
Тепер фон блоку просвічується і через нього видно фонову картинку. Дана картинка і фон наведені лише для прикладу. Як ви розумієте, в css background прозорість може стати в нагоді, коли вам треба, щоб фон вкладеного елемента просвічувався, не закриваючи інші фони, розташовані в інших шарах.