Як зробити прозорий фон в css

18

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

Прозорість в сайтобудуванні

Для початку варто для себе з’ясувати, що колір може бути повністю прозорим (по суті, невидимим) і напівпрозорим. Це коли його трохи видно, а через нього можуть бути видні інші елементи веб-сторінки.

Як реалізується

Власне, є два основних варіанти, як зробити прозорий фон. Перший:

background: transparent;

Потрібного елементу задаємо таке правило і все буде працювати. Другий варіант:

background: rgba(0, 0, 0, 0);

Колірний режим rgba є вдосконаленою версією rgb, тільки тут вказується ще й прозорість, яку можна ставити в значеннях від 1 до 0, де 0 – повністю прозорий колір. Таким чином, rgba є чудовою можливістю для встановлення напівпрозорого фону.

Навіщо все це потрібно?

Здавалося б, а чому колір не встановити як білий, і тоді його не буде видно? Так, але тут важливо пам’ятати, що по дизайну всі сайти різні.

Якщо фоновий колір всієї сторінки або окремих великих структурних блоків відмінний від білого, то такий метод вже не підходить.

За замовчуванням у блокового елемента при його створення немає явного фону, він повністю прозорий. Переконатися в цьому легко – створіть на порожній сторінці блок, визначте йому якісь розміри (ширину і висоту), більше нічого не задавайте. Побачите щось на сторінці? Немає.

Напівпрозорість

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

background: rgb(255, 234, 13)

Як зробити прозорий фон в css

То отримаємо досить яскравий жовтий колір, що в цілому у веб-дизайні не завжди вітається. Але якщо записати так:

background: rgba(255, 234, 13, 0.5)

Як зробити прозорий фон в css

Ми вказали напівпрозорість, так що він став набагато більш тьмяним.

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

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

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