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

Question

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

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

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

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

Markup:

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> 

Answer 1

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

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

выше правила CSS будет установлено значение 4 0% полупрозрачного белого фона на элементе Р.

Однако 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

btw, IE6 не поддерживает полупрозрачные PNG, поэтому вам придется использовать другое обходное решение только для этого браузера. Transparent background png image issue in IE6

Answer 2

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

ДИВА р {фон: RGBA (255,255,255, .5)}