Прозрачный фон, чистый текст? - PullRequest
Новая
       5

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

1 голос
/ 25 октября 2010

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

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

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

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>

Ответы [ 2 ]

5 голосов
/ 25 октября 2010

Современные браузеры (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, поэтому вам придется использовать другой обходной путь только для этого браузера. Проблема с прозрачным фоновым изображением в PN6 в IE6

0 голосов
/ 25 октября 2010

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

div p {background: rgba (255,255,255, .5)}

...