Непрозрачность фонового цвета, но не текст

Question

Как сделать прозрачность кросс-браузера (включая Internet Explorer 6) на фоне div, пока текст остается непрозрачным?

Мне нужно сделать это, не используя никакую библиотеку, такую ​​как jQuery и т. Д. (Но если вы знаете о библиотеке, которая делает это, я бы хотел знать, чтобы я мог посмотреть на их код).

Answer 1

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

.alpha60 { 
    /* Fallback for web browsers that don'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)"; 
} 

В дополнение к этому, вы должны объявить background: transparent для веб-браузеров IE, предпочтительно, показываемой с помощью условных комментариев или подобного!

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

Answer 2

Я использую альфа-прозрачные PNG для этого:

div.semi-transparent { 
    background: url('semi-transparent.png'); 
} 

Для IE6, вы должны были бы использовать PNG фикс (1, 2), хотя.

Answer 3

Я создал этот эффект в своем блоге Landman Code.

Что я сделал

#Header { 
 
    position: relative; 
 
} 
 
#Header H1 { 
 
    font-size: 3em; 
 
    color: #00FF00; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#Header H2 { 
 
    font-size: 1.5em; 
 
    color: #FFFF00; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#Header .Background { 
 
    background: #557700; 
 
    filter: alpha(opacity=30); 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30); 
 
    -moz-opacity: 0.30; 
 
    opacity: 0.3; 
 
    zoom: 1; 
 
} 
 
#Header .Background * { 
 
    visibility: hidden; // hide the faded text 
 
} 
 
#Header .Foreground { 
 
    position: absolute; // position on top of the background div 
 
    left: 0; 
 
    top: 0; 
 
}

<div id="Header"> 
 
    <div class="Background"> 
 
    <h1>Title</h1> 
 
    <h2>Subtitle</h2> 
 
    </div> 
 
    <div class="Foreground"> 
 
    <h1>Title</h1> 
 
    <h2>Subtitle</h2> 
 
    </div> 
 
</div>

Важно, что каждая прокладка/запас и содержание должно быть одинаковым в обоих .Background как .Foreground.

Answer 4

Расслабляющий ваше требование работать в IE6 и устаревших браузеров вы можете использовать :: до и дисплей: встроенный блок

div 
{ 
    display: inline-block; 
    position: relative;  
} 
div::before 
{ 
    content: ""; 
    display: block; 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
    background:red; 
    opacity: .2; 
} 

Демо на http://jsfiddle.net/KVyFH/172/

Он будет работать на любом современном браузере

Answer 5

Tha nks @ davy-landmann для https://stackoverflow.com/a/638064/417153. Вот что я искал! Тот же эффект с меньшим количеством кода:

@searchResultMinHeight = 200px; 
    .searchResult { 
    min-height: @searchResultMinHeight; 

    position: relative; 
    .innerTrans { 
     background: white; 
     .opacity(0.5); 
     min-height: @searchResultMinHeight; 
    } 
    .innerBody { 
     padding: 0.5em; 
     position: absolute; 
     top: 0; 
    } 
    }