Как сделать непрозрачный текст в прозрачном блоке

[Mila]

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

Может, кому то приходилось решать такую задачу и у него получилось?

У меня, что то никак не получается.

Нашла одно решение, но оно мне не подошло потому, что содержит заданную высоту блока.

Нижняя часть блока, если она не используется, скрыта.

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

Как с этим бороться?

Помогите, плиз, кто может.

Вот стиль для блока:

.rightcolumn {

position:relative;

top: 80px; right: 30px;

padding:30px;

width:600px;

color:#000;

float:right;

overflow:hidden;

}

.rightcolumn .transparency {

opacity:0.5;

filter:alpha(opacity=50);

-moz-opacity:0.5;

background-color:#fff;

width:660px;

height:2500px;

position:absolute;

top:0px;

left:0px;

border: 1px solid #9E5C28;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

}

А дальше из html страницы:

<div class="rightcolumn">

<div class="transparency"> </div>

Здесь идет текст

</div>

Edited December 29, 2008 by Mila

[s0rr0w]

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

Если использовать css-прозрачность, то никак.

Браузер отображает этот эффект один в один как описано в спецификации.

[SelenIT]

Mila, самый простой вариант (если бы не IE6) - использовать в качестве фона полупрозрачную PNG-картинку (для IE6 можно взять другую, непрозрачную - судя по закругленным уголкам из CSS3, вас устраивает graceful degradation для отсталых браузеров.

Но можно попробовать "довести до ума" и ваш вариант - заменить в нем height:2500px; для .transparency на

bottom: 0px; /* в сочетании с top:0px растянет блок на высоту родителя, но не работает в IE6 */
_height: expression(this.parentNode.clientHeight + 'px'); /* "костыль" для IE6 - и здесь без него никак... */

[Mila]

SelenIT, спасибо!

В FF отлично получается. Но к сожалению, ничего не изменилось для IE.

Почему то костыль не сработал.

[SelenIT]

В IE, наверное, не этот костыль не сработал, а

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

т.к. первые два по определению для Gecko- (Firefox, Seamonkey, Flock...) и WebKit-браузеров (Safari, Chrome) соответственно, а последний - черновик CSS3, не поддерживаемый пока нигде.

Для IE можно нарисовать похожие закругления, используя VML, а для Оперы (9.5 и выше) - соответственно, SVG (пример).

[Mila]

"судя по закругленным уголкам из CSS3, вас устраивает graceful degradation для отсталых браузеров"

Конечно. не устраивает.

Но как это исправить я не знаю.

Хотелось бы без картинок и так, чтобы минимум кода.

А все кроссбраузерные варианты имеют жуткий объем кода.

Кстати, для IE не сработал именно костыль, потому что в нем не видно нижнего бордера в блоке, а значит - низ блока скрыт.

Edited December 29, 2008 by Mila

[SelenIT]

Тогда, имхо, только картинки. Две полоски 660×15px - для верхней пары закруглений и для нижней, абсолютно спозиционировать в .rightcolumn c top:0 и bottom:0 соответственно, а сплошную заливку (нынешний .transparency) растянуть уже между ними (top:15px; bottom:15px; _height: expression(this.parentNode.clientHeight -30 + 'px'). И им всем задать одинаковую прозрачность.

Это если делать честную прозрачность. Но во многих случаях достаточно ее имитации - тогда все намного проще. Это случайно не для того сайта, что в подписи?

Edited December 29, 2008 by SelenIT

[Mila]

Нет, не для него. На нем и так сойдет.

Это я делаю тему для Wordpressa и там нужен прозрачный блок на фоне картинки.

Причем фон должен просвечивать через картинку.

Проблема в том, что мне нужно все сразу: и круглые уголки, и прозрачность блока, и непрозрачный текст в блоке.

Есть решения каждой проблемы в отдельности, а как это все объединить?

У меня никак не выходит.

"Но во многих случаях достаточно ее имитации - тогда все намного проще."

Что вы имеете ввиду под "имитацией"?

Edited December 29, 2008 by Mila

[SelenIT]

Что вы имеете ввиду под "имитацией"?

Например, обычный (непрозрачный) фон для блока или его частей, визуально совпадающий с тем, что было бы видно при честной реализации всего перечисленного. Как вариант...

[Mila]

Ладно, попробую сделать с картинками.

Спасибо.

[Добрый]

http://habrahabr.ru/blogs/css/30565/

не то?

[Mila]

Добрый, спасибо за ссылку.

Только там тот же вариант, что и у меня.

А как его совместить с круглыми уголками я не знаю.

[Ramon]

Помогите люди добрые. Я перечитал уже все но до сих пор так и ничего не получается, либо я не правильно делаю. functionwptheme.theme.morestyle.ru/ Мне нужно в этой теме сделать полностью на 100% празрачные страницы(те которые сейчас белые) чтобы фоновый рисунок просматривался полностью. Но при этом контент не должен быть прозрачным. Если не затруднит, то прям тыкните пальцем где,что и на что поменять.