WedX - журнал о программировании и компьютерных науках

Изменение текста в jumbotron без изменения стиля фона

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

Вот мой код,

HTML

<div class="jumbotron">
    <div class="cover-container">
        <h1 class="cover-heading">Title text.</h1><br />
        <p class="lead">Welcome text.</p>
    </div>
</div>

css

.jumbotron {
    opacity: 0.6;
}

Если я не включил достаточно своего кода, я опубликую больше, спасибо за любую помощь!

html css twitter-bootstrap
03.10.2014

  • Это довольно хорошо объясняет проблему: непрозрачность 03.10.2014
  • Не забудьте проголосовать за правильный ответ 07.10.2014

Ответы:


1

Решение состоит в том, чтобы установить только цвет фона джамботрона с непрозрачностью 0,6, например:

.jumbotron {
    background-color: rgba(238, 238, 238, 0.6); // exact what you need
}

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

Если вам нужно было заботиться о более старых версиях IE, вы должны использовать фильтр, например:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

Просто настройте правильные значения цвета.

03.10.2014

2

непрозрачность будет применяться ко всему блоку, включая дочерние элементы. Что вам нужно сделать, так это добавить дополнительный div внутри только для фона.

<div class="jumbotron">
    <div class="jumbotron-bg"></div>
    <div class="cover-container">
        <h1 class="cover-heading">Title text.</h1>
        <br>
        <p class="lead">Welcome text.</p>
    </div>
</div>

удалите цвет фона из jumbotron и используйте следующее:

.jumbotron {
    position: relative;
}

.jumbotron-bg {
    opacity: 0.6;
    background: #000; /* or whatever color you use*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

просто чтобы быть уверенным, что текст появится над фоном

.cover-container {
    position: relative;
    z-index:2;
}
03.10.2014
Новые материалы
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
Для любых предложений по сайту: [email protected]