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

Ksena

Дата 30.12.2008, 00:39 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 12.5.2008

Репутация: нет
Всего: нет

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

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

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

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

Как с этим бороться?
Помогите, плиз, кто может.

Код


CSS:

.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">&nbsp;</div>
Здесь идет текст
</div>

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

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

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

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

Помогите, пожалуйста.

WebMast

Дата 1.1.2009, 21:39 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2

Хм.. Может вы что-то не так сделали? Подумайте, таки блоки с закругленными краями не в какие рамки не входят и ваш вариант не кроссбраузерен. И радиус применять тоже не пригоже, уж тогда JavaScrip в помощь.
А вообще по теме, то решение вот:

Код


.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;
}
.cont{
    position:relative;
}

Код


<div class="rightcolumn">
  <div class="transparency">&nbsp;</div>
  <div class="cont">Здесь идет текст</div>
</div>

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

Ksena

Дата 2.1.2009, 03:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 12.5.2008

Репутация: нет
Всего: нет

Спасибо. попробую сделать так, как вы пишете.

Senslis

Дата 2.1.2009, 08:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 2.1.2009

Репутация: нет
Всего: нет

Скажите получилось или нет сделать то, что вы хотели. У меня такая же проблема. Если получилось, то какое решение у вас.
Спасибо.

WebMast

Дата 4.1.2009, 17:57 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2

Senslis, попробуй мой вариант. Тестировался в Opera, FF, Konqueror

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »