Що таке rgba завдання рівня прозорості за допомогою rgba і властивості opacity

Спочатку давайте поговоримо про те, що таке RGBA. RGB (що означає Red, Green, Blue - червоний, зелений, синій) - колірна модель, що дозволяє задавати колір за допомогою чисельних значень трьох складових. Комбінуючи їх, можна отримати безліч різних відтінків.

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

body background: # 3792b3;
>

Можна задати той же колір в RGB, використовуючи три десяткових значення (для червоного, зеленого і синього).

body background: rgb (55,146,179);
>

В обох випадках виходить один і той же відтінок, але використовується різний синтаксис.

RGBA розшифровується як Red Green Blue Alpha. На W3C пояснюється: «У цій специфікації колірна модель RGB розширена і включає складову альфа, що дозволяє задати непрозорість кольору» Це означає, що можна додати четверте значення (від 1 до 0), щоб задати рівень непрозорості даного RGB-кольори. Для повної непрозорості використовується значення 1, для повної прозорості - 0.

Наприклад, ми можемо зробити наш блакитний колір напівпрозорим, додавши .5 в якості четвертого значення після значень RGB.

Для одного і того ж значення RGB можна домогтися різного ступеня непрозорості: 1 задає непрозорість 100%. 75 дає той же колір, але з непрозорістю 75%. 5 означає 50% і т. Д.

Можливість задавати прозорість кольору легко і швидко прямо в таблиці стилів - це прекрасно. Але як щодо власне властивості opacity і чим воно відрізняється від RGBA?

В CSS3 можна додавати прозорість за допомогою властивості opacity. Просто задайте значення від 1 до 0, щоб визначити ступінь прозорості будь-якого елементу. Наприклад, якщо ви хочете домогтися непрозорості 65% для всіх абзаців на сторінці, можна написати такий код.

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

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

На щастя, використання синтаксису колірної моделі RGBA безпечно для браузерів, які її не підтримують. Наприклад, Internet Explorer просто проігнорує таке правило.

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

Замовити створення сайту >>
від SEOKlub