VPF::Затемнить задний фон - Форум программистов

Randomazer

Дата 5.5.2015, 13:22 (ссылка)

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

Загрузка ...

Новичок

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

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

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

Пример https://jsfiddle.net/7d321ovk/
HTML

Код


    <body>
<header>
        <div class="container blacken">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="http://programs-tv.ru/upload/tv/videos/6/534/s_53332.jpg" alt="">
                    <div class="intro-text">
                        <span class="name">Главная надпись</span>
                        <hr class="star-light">
                        <span class="skills">Второстепенная надпись</span>
                </div>
                </div>
            </div>
        </div>
    </header>
    </body>

CSS

Код


header {
    text-align: center;
    color: #fff;
    background-image: url(http://www.fonstola.ru/pic/201111/1600x900/fonstola.ru-55699.jpg);
}


.blacken{
    background-color: #000;
    height: 100%;
    left: 0;
    opacity: 0.25;
    top: 0;
    width: 100%;
    z-index: 80;
}

header .container {
    padding-top: 100px;
    padding-bottom: 50px;
}

header img {
    display: block;
    margin: 0 auto 20px;
}

header .intro-text .name {
    display: block;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 2em;
    font-weight: 700;
}

header .intro-text .skills {
    font-size: 1.25em;
    font-weight: 300;
}

Это сообщение отредактировал(а) Randomazer - 5.5.2015, 13:52

ksnk

Дата 5.5.2015, 14:01 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Так?

Добавлено через 30 секунд

Код


.blacken{
    background-color: rgba(0,0,0,0.25);
    height: 100%;
    left: 0;
//    opacity: 0.25;
    top: 0;
    width: 100%;
    z-index: 80;
}

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Randomazer

Дата 5.5.2015, 14:09 (ссылка)

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

Загрузка ...

Новичок

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

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

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

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