Как на CSS сделать полупрозрачный фон, но не текст?
Можно поступить двумя способами. Использовать полупрозрачный PNG, или же прибегнуть к CSS3 (в старых браузерах, естественно, не сработает):
background-color:rgba(255,0,0,0.5);
Ответ №2
Можно использовать следующий трюк для совместимости со всеми браузерами:
.alpha60 {
/* Обращаемся ко всем браузерам, которые не поддерживают RGBa */
background: rgb(0, 0, 0) transparent;
/* А теперь тем, которые поддерживают зададим прозрачность 0.6 */
background: rgba(0, 0, 0, 0.6);
/* Для IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* Для 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Примечание. Поддержка RGBa доступна в:
- Firefox 3+
- Safari 2+
- Opera 10
Фильтры в Internet Explorer стали доступны начиная с Internet Explorer 5.5.
Это значит, что этот трюк сработает фактически везде!