Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Затемнить задний фон 
:(
    Опции темы
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
PM MAIL   Вверх
ksnk
Дата 5.5.2015, 14:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

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



Так?

Добавлено через 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
PM MAIL WWW Skype   Вверх
Randomazer
Дата 5.5.2015, 14:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Да, огромное спасибо. С меня плюс. Тему можно закрывать.
PM MAIL   Вверх
Google
  Дата 19.11.2019, 01:17 (ссылка)  





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


 




[ Время генерации скрипта: 0.0683 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.