Я хочу достичь этого с помощью html и css:
Я попытался установить непрозрачность контейнера в 0.3 и поле в 1, но он не работает: оба div имеют 0,3 непрозрачность.
Эффект, который я пытаюсь достичь, - это всплывающее окно, которое появляется поверх страницы. Он подсвечивается затуханием содержимого ниже (путем уменьшения непрозрачности).
Насколько я знаю, вы не можете сделать это простым способом. Здесь есть несколько вариантов:
Используйте абсолютное позиционирование для позиционирования поля "внутри" контейнера.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>Вы можете использовать прозрачность в сочетании с цветом фона, например так:
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}<div id="container">
containter text
<div id="box">
box text
</div>
</div>Попробуйте использовать rgba как наложение "pre content" на ваш образ, это хороший способ сохранить отзывчивость и ни для одного из других элементов, которые будут выполняться.
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>Применить это правило css
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
В дополнение к этому вы должны объявить фон: прозрачным для веб-браузеров IE.
Для получения более подробной информации перейдите по следующей ссылке:
Другой обходной путь - просто использовать наложенный фон для создания аналогичного эффекта.
Лично мне нравится черный наложение с непрозрачностью около 65%, но для того, что вы пытаетесь сделать, вы можете использовать белое наложение на уровне около 70%.
Создайте небольшой (100 x 100 или менее) PNG в Photoshop или GIMP, который имеет нужный вам цвет и непрозрачность. Затем просто установите это как фон вашего лайтбокса.
Если вы создаете несколько PNG файлов с разной прозрачностью, вы можете легко переключаться между ними с помощью JS или динамически при загрузке с помощью серверных сценариев.
Это не технически то, что вы пытаетесь сделать, но эстетически это может дать очень похожий эффект, и UX мудрый выполняет то же самое. Это также очень легко сделать, и широко поддерживается практически во всем.
Любой дочерний элемент с набором непрозрачности примет ту непрозрачность.
Для достижения этого стиля вы можете использовать цвета и фильтры rgba для IE для фона и непрозрачность текстовых элементов. Пока второй ящик не является дочерним элементом одного из текстовых элементов, он не наследует непрозрачность.
Это может быть не самый ортодоксальный метод, но вы можете использовать небольшое полупрозрачное фоновое изображение для каждого повторяющегося div/контейнера. Кажется, что в этот день и в этом возрасте вы сможете достичь этого в чистом (просто не хакивом) css без js, но, как видно из вышеприведенных ответов, это не так прямо...
Использование черепичного изображения может показаться датированным, но не будет беспокоиться обо всех браузерах.
Используя background-color: rgba(#777788, 0.3); вместо непрозрачности может решить проблему.
Вы можете добавить одноуровневую ячейку контейнера, расположенную абсолютно позади контейнера, с таким же размером и применить к ней прозрачность.
И не используйте фон на вашем контейнере.
Теперь у дочерних элементов контейнера нет непрозрачного родителя, и проблема исчезает.