Создание сайтов > Верстка > Непрозрачный текст в прозрачном блоке

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


(Нажмите, чтобы увеличить)

Блуждая по форумам и блогам, частенько натыкаюсь на проблему: люди ищут решение проблемы, как сделатть непрозрачный текст в прозрачном блоке с закругленными краями на CSS?

Программисты предлогают использовать JavaScript, верстальщики предлагаю безумные решения. *Я не говорю о всех*. Я решил написать для вас всего пару строчек, который работает, и без лишних наворотов, которые совсем не нужны.

Итак.. В начале делаем блок с закругленными краями, правда это рабоет только в FF, а в остальных закругленных углов не будет.
HTML:
<div class="rightcolumn"> <div class="transparency"></div> Здесь идет текст</div>
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;
}
Теперь, добавляем класс (например .cont), в котором будет текст.

HTML:
<div class="rightcolumn">
<div class="transparency">&nbsp;</div>
<div class="cont">Здесь идет текст</div>
</div>
CSS:
.cont{ position:relative; }
Все работает. А в мозиле даже и закругленные углы есть 😉

Пример виден на верхней фото, нажмите чтобы увеличить!

6 января 2009 в 20:3910 комментариев Верстка,

Комментарии — 10 комментариев

  1. #212 Алла Дин в 19:31, 12 января 2009:

    Ответить | Цитировать

    спасибо, все прекрасно видно

  2. #220 Богдан в 15:51, 18 января 2009:

    Ответить | Цитировать

    спасибо. хотя закругленные углы не получились

  3. #221 WebMast в 16:19, 18 января 2009:

    Ответить | Цитировать

    Закругленный углы работают только в FF (Мозила).

  4. #992 Сфинкс в 16:47, 5 мая 2009:

    Ответить | Цитировать

    Здорово, надо попрактиковаться.

  5. #9851 Sergio в 13:23, 2 июля 2010:

    Ответить | Цитировать

    Замороченный код CSS.
    Зачем два раза разные параметры присваивать для .rightcolumn?

  6. #9852 Sergio в 13:29, 2 июля 2010:

    Ответить | Цитировать

    вопрос снимается, пылинку за запятую принял… тополинный пух…жара…июнь

  7. #11641 Алексей в 8:49, 1 июня 2011: (подписался)

    Ответить | Цитировать

    а вот как быть если нужно чтобы высота прозрачного блока автоматом подгонялась под высоту блока с текстом? Тут видимо без js(jquery) не обойтись?

  8. #49099 Djin в 10:32, 16 апреля 2015:

    Ответить | Цитировать

    Уже можно так
    background: rgba(0, 170, 238, 0.9); /* Цвет фона */
    color: #fff; /* Цвет текста */

  9. #74339 Dayana в 13:34, 19 февраля 2018:

    Ответить | Цитировать

    Большое спасибо. Долго искала решение этой проблемы.

  10. #76111 Евгений в 18:39, 25 апреля 2018:

    Ответить | Цитировать

    Огромное спасибо выручили ,респект автору ,я много ресурсов перерыл а у вас нашел что нужно!!!

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting