прозрачность и проблема текста - PullRequest
Новая
       5

прозрачность и проблема текста

1 голос
/ 25 января 2011

Я играю с атрибутом opacity CSS.

Это хорошо работает для коробки (с 50% или черным с 30%) - проблема в том, что текст внутри поля также прозрачный.

Я хотел бы, чтобы текст был 100% белым в коробке с прозрачностью 30%.

Решение состоит в том, чтобы использовать CSS с настройками или использовать.png для фона и забыть настройку opacity.

Подскажите, как сделать 30% непрозрачности с 100% непрозрачностью текста внутри.

Заранее спасибо

Ответы [ 2 ]

4 голосов
/ 25 января 2011

Ваш выбор:

  • Использование CSS3 : background: rgba(255, 255, 255, 0.3). Демонстрация в реальном времени
  • Абсолютно расположите два тега <div> друг над другом.Один из них является фоновым и имеет настройку opacity.На втором есть текст и фон transparent.
  • Как вы намекали в своем вопросе, вы можете использовать файл .png с прозрачностью 30%.

Я знал Я читал о том, как заставить rgba работать в IE.

См .: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: 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)";
}
0 голосов
/ 25 января 2011 
#box { color:white; background-color:rgba(0,0,0,0.3); }

Примечание: rgba не работает в IE6-8

...