Красный bg + черное поле с непрозрачностью на 85 = розовый текст - PullRequest
Новая
       6

Красный bg + черное поле с непрозрачностью на 85 = розовый текст

1 голос
/ 02 марта 2011 
<style>
* {
    background: red;
}
.blackbalk{
    background:black;
    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter:alpha(opacity=85); 
    -khtml-opacity:.85; 
    -moz-opacity:.85; 
    opacity:.85; 
    width: 985px;
    margin: 0 auto;
    height:255px;
    color: white; 
}
</style>
<div class="blackbalk">Text </div>

Теперь мой текст становится розовым, почему?Как я могу получить его снова белым?

Привет

Редактировать: JS Fiddle, чтобы прояснить: http://jsfiddle.net/WFxbH/

Ответы [ 3 ]

1 голос
/ 02 марта 2011

Кроме того, непрозрачность влияет на весь элемент и его содержимое, а не только на цвет фона. Если вы просто хотите, чтобы цвет фона был на 85% черным, вы должны указать его цветом RGBA, например: 

.blackbalk {
    background: rgba(0, 0, 0, 0.85);
    width: 985px;
    margin: 0 auto;
    height: 255px;
    color: white;
}
1 голос
/ 02 марта 2011

Вы можете сделать это, используя вместо этого rgba фон для вашего элемента:

Live Demo - это будет работать "в любом браузере, о котором вы заботитесь" , и мой jsFiddle включает рекомендованный условный комментарий IE , чтобы он также работал в этом браузере. 

.blackbalk {
     /* 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.85);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000)";
}
1 голос
/ 02 марта 2011

РЕДАКТИРОВАТЬ: не могу перевернуть каскад непрозрачности. Лучшая альтернатива в моей шестерне - использовать однопиксельную непрозрачность 85% черного цвета в качестве фонового изображения. Вариант 2 - сделать внутреннее содержимое фактически за пределами div, а затем расположить его поверх, но это намного сложнее. Вы даже можете заставить прозрачный png работать в IE без особых проблем.

ИГНОР: Не очень хорошо, так как сейчас я не могу это проверить, но я предполагаю, что текст становится прозрачным с изменением непрозрачности. Возможно, если вы поместите свой текст в промежуток с background-color: none и color: white; это может сработать. Может потребоваться установить непрозрачность промежутков до 100%, чтобы переопределить.

...