Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Затемнить задний фон

Автор: Randomazer 5.5.2015, 13:22

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

Пример 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;
}

Автор: ksnk 5.5.2015, 14:01

https://jsfiddle.net/ob5mau0o/

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

Код


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

Автор: Randomazer 5.5.2015, 14:09

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