Как сделать прозрачный фоновый цвет текста?

Question

Посмотрите на http://www.sydsvenskan.se/ или просто посмотрите на изображение внизу и проверьте их большое изображение с текстом, накладывающим его на верхнюю часть сайта.

У них черный прозрачный фон на тексте, но сам текст не прозрачен.Как они этого добиваются?

Если я попытаюсь добавить прозрачность для текстового блока с заданным фоном, текст также станет прозрачным.

Answer 1

CSS 3 представляет цвета RGBA . Используйте один для фона.

Для совместимости с браузерами, которые его не поддерживают, вы можете использовать сплошные цвета или полупрозрачные PNG.

Answer 2

Используйте RGBa!

.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

через http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Answer 3

Они используют полупрозрачное фоновое изображение PNG.

.supertop div h1 a {
color: #FAFAFA;
background-image: url("/template/ver2-0/gfx/trans_black.png");
padding: 2px 10px;
line-height: 60px;
}

это самый безопасный подход на данный момент, если не все браузеры поддерживают rgba цвета.

Это будет непрозрачный серый в IE6, который не поддерживает альфа-прозрачность.

Answer 4

у него черное прозрачное фоновое изображение, firebug это и вы увидите это.

Answer 5

Фоновое изображение является ключом http://www.sydsvenskan.se/template/ver2-0/gfx/trans_black.png