CSS прозорість для фону
Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 2-12-2014, 21:43 5 667 1
При створенні прозорості для кольору чи фону виникає проблема, або створювати за допомогою напівпрозорої картинки, або за допомогою параметру opacity. Але у двох випадка є мінуси:
- png картинка є лишньою...
- opacity застосовується до тега div і його вмісту, і тому текстом в блоці теж стає напівпрозорий.
Тому є лише один вихід! Якщо використовувати RGBA.
Формат опису кольору RGBA
CSS3 дозволяє задавати колір, використовуючи функції RGB і RGBA. При цьому ми повинні вказати частку кожної колірної складової, під яку відводиться один байт (від 0 до 255, раптом хто не знає).
Синтаксис у RGBA дуже простий:
background: rgb( 0, 255, 0); /* зелений колір */
Для RGBA додається четвертий параметр - альфапрозрачность (від 0 до 1).
background: rgba( 255, 0, 0, 0.5); /* червоний колір з прозорістю 50% */
Ось воно, рішення нашої задачі. Досить задати колір фону за допомогою rgba і все буде виглядати як нам потрібно. Без зайвих картинок і елементів!
Подивитися на складові кольору можна використовуючи інструмент фотошопа «піпетка»
Про кросбраузерність:
Так як функція RGB значно старше, ніж RGBA і присутній ще з часів стандарту CSS2, то для підстраховки від найдавніших браузерів можна використовувати таку дублюючу конструкцію RGB:
.someBlock {
background: rgb( 255, 0, 0);
background: rgba( 255, 0, 0, 0.5);
}
При такому підході у прадідусів сучасних Тенет не буде напівпрозорості, але сам колір залишиться правильним.
Окремо доведеться подбати про IE - це лайно аж до 8 версії включно не розуміє RGBA.
Для ІЕ задамо прозорість фільтром gradient.
Само собою, в бойових умовах виносимо це правило в окремий CSS, який підключаємо умовними коментарями.
.someBlock {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000);
zoom: 1;
}
Фішка в тому, щоб вказати початковий і кінцевий кольори однаковими (ff0000 - червоний) і скористатися тим, що для градієнта в цьому фільтрі можна задати альфаканал (у прикладі значення 80).
Для довідки: у фільтрі використовується шістнадцяткова система і повністю непрозорого кольору відповідає код FF (в десятковій це 255). Відповідно шістнадцятеричне 80 - це десяткове 128, тобто 50% прозорості.
