Прозрачный фон, чистый текст?

бился головой об это некоторое время. Для редизайна сайта CSS мне нужен родительский div, чтобы иметь фоновое изображение, за которым следует дочерний элемент p с прозрачным фоном, но текст переднего плана должен оставаться с непрозрачностью 100%. Я попытался сделать изображение размером 1 пиксель полупрозрачным (40%) белым, но оно не отображается при использовании с фоновым изображением. Я подтвердил, что это не связано с повторным отключением.

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

Сайт должен переключаться между двумя дизайнами, поэтому я не могу переместить текст в другой дочерний элемент.

JQuery широко используется, если это может мне помочь, это было бы идеально.

Разметка:

CSS:

.titles
{
    background-color: #FFF;
    background-image: URL("../images/Vessel_TitleBackground.jpg");
    padding-top: 2px;
    font-weight: bolder;
    text-align: left;
}
.titles p
{
    text-indent: 2%;
    background-color: #FFF;
    filter:alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6;
    font-size: 1.1em;
    color: #000;
}

HTML:

<div>
    <div class="titles">
        <p>YEY</p>
    </div>
    <div class="contents">YEY
    </div>
</div>

jquery css internet-explorer firefox transparency
person C Bauer    schedule 25.10.2010    source источник
comment
Можете показать разметку и css?   -  person AGoodDisplayName    schedule 25.10.2010

Ответы (2)


arrow_upward
5
arrow_downward

Современные браузеры (Firefox, Chrome, Safari, Opera) поддерживают RGBA:

#container p { background-color:rgba(255,255,255,0.4); }

Вышеупомянутое правило CSS установит 40% полупрозрачный белый фон на элементе P.

Однако IE8 и более ранние версии не поддерживают это (IE9 будет поддерживать). Следовательно, вам нужен обходной путь для IE. Вы можете использовать условные комментарии IE, чтобы определить дополнительное правило CSS только для IE8 и ниже, которое установило бы полупрозрачное изображение ...

<!--[if lt IE 9]>
<style>
    #container p { background-image:url(dot.png); }
</style>
<![endif]-->

Если у вас возникли проблемы с работой полупрозрачного изображения, вот демонстрация: http://vidasp.net/tinydemos/img-40-percent-transparent.html

Кстати, IE6 не поддерживает полупрозрачные PNG, поэтому вам придется использовать другой обходной путь только для этого браузера. Проблема с прозрачным фоновым изображением PNG в IE6

person Šime Vidas    schedule 25.10.2010
comment
Должно быть 40%. Обновил вопрос, чтобы отразить это. - person C Bauer; 25.10.2010
comment
Я думал, r,g,b значения цвета ограничены _2 _-_ 3_? - person David says reinstate Monica; 25.10.2010

arrow_upward
0
arrow_downward

Прозрачность CSS влияет как на передний, так и на задний план. Если вы хотите, чтобы фон был полупрозрачным и в то же время оставался непрозрачным для текста, вам следует проверить значения цвета CSS3 rgba:

div p {фон: rgba (255,255,255, 0,5)}

person Unless    schedule 25.10.2010