Как на 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.

Это значит, что этот трюк сработает фактически везде!