2011-01-24 3 views
1

Я играю с атрибутом CSS opacity.проблема с прозрачностью и текстом

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

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

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

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

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

ответ

4

Ваш выбор:

  • Using CSS3: background: rgba(255, 255, 255, 0.3). Live Demo
  • Абсолютно позиция 2 <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)"; 
} 
+1

IE на самом деле имеют свой собственный 'используя фильтр rgba' подобные свойства. Вот полезный генератор для этого: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/ – mqchen

+0

@mqchen: Спасибо. Это похоже на очень простой способ генерации 'startColorstr' и' endColorstr' для фильтров IE. – thirtydot

0
#box { color:white; background-color:rgba(0,0,0,0.3); } 

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

Смежные вопросы