Прозорий фон за допомогою css (властивість background), замітка css

Вам потрібно зробити прозорий фон. але при цьому не прозорі букви (тобто opacity для цього не підходить)? Тоді я розповім про одну цікаву особливість CSS параметра background.

Зазвичай заливка фону вказується ось таким способом (наприклад сірий колір):

Але є й інший варіант вказати той же колір, але вже з прозорістю. Робиться це ось так:


де:
- перші 3 цифри (220, 220, 220) - це R, G і B координати потрібного кольору (можна підглядати в палітрі фотошопа, можу навіть викласти фото, де саме, якщо цікаво), причому вони не завжди збігаються, просто в нашому випадку так вийшло;
- остання цифра (0.7) - прозорість у відсотках, 0.7 = 70% (аналогічно opacity впринципі).

До речі, якщо комусь потрібен прозорий чисто чорний overlay, то він буде виглядати ось так:


У чорного RGB завжди 0, такий вже колір.

Ось і весь секрет прозорого background на CSS.
Верстайте на здоров'я! =)
  • Мені б дуже хотілося знати, як Вас звати і як зв'язатися з Вами. Заповнення цієї інформації не займе у Вас багато часу, а я буду вдячний за це!

    Сайт (не обов'язково):

    Мій блог автоматично запам'ятає Ваші нік / пошту в межах поточного браузера. При бажанні їх завжди можна буде скинути.

    Підписуйтесь на мій блог

    Хочете першими дізнаватися про найцікавіше? Тоді підпишіться на розсилку новин.

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

    Або стежте за новинами


    Створити сайт самому і заробляти в інтернеті цілком реально. І мій блог допоможе вам в цьому.

    Схожі статті