Я не хочу наследовать непрозрачность дочернего элемента из родителя в CSS.
У меня есть один div, который является родительским, и у меня есть другой div внутри первого div, который является дочерним.
Я хочу установить свойство opacity в родительском div, но я не хочу, чтобы дочерний div наследовал свойство непрозрачности.
Как я могу это сделать?
Вместо использования непрозрачности установите фоновый цвет с помощью rgba, где 'a' - уровень прозрачности.
Итак, вместо:
background-color: rgb(0,0,255); opacity: 0.5;
использование
background-color: rgba(0,0,255,0.5);
Непрозрачность на самом деле не наследуется в CSS. Это преобразование группы после рендеринга. Другими словами, если a <div> имеет набор непрозрачности, вы предоставляете div и всех его детей во временный буфер, а затем объединяете весь этот буфер на страницу с заданным значением непрозрачности.
То, что вы хотите здесь сделать, зависит от того, какой именно поиск вы ищете, что неясно из вопроса.
Как уже упоминалось в этом и других подобных потоках, лучший способ избежать этой проблемы - использовать RGBA/HSLA или использовать прозрачный PNG.
Но если вы хотите смешное решение, подобное тому, которое было связано с другим ответом в этом потоке (который также является моим сайтом), вот новый script, который я написал, который исправляет эту проблему автоматически, называется thatsNotYoChild.js
http://www.impressivewebs.com/fixing-parent-child-opacity/
В основном, он использует JavaScript для удаления всех дочерних элементов из родительского div, а затем повторно помещает дочерние элементы туда, где они должны быть, фактически не будучи дочерними элементами этого элемента.
Для меня это должно быть последним средством, но я подумал, что было бы интересно написать что-то, что сделало это, если кто-то захочет это сделать.
Небольшой трюк, если ваш родитель прозрачен, и вы хотите, чтобы ваш ребенок был одним и тем же, но определен исключительно (например, чтобы перезаписать стили пользовательского агента в раскрывающемся списке выбора):
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}
Непрозрачность дочернего элемента наследуется от родительского элемента.
Но мы можем использовать свойство позиции css для достижения наших достижений.
Текстовый контейнер div может быть помещен вне родительского div, но с абсолютным позиционированием, прогнозирующим желаемый эффект.
Идеальное требование ------------------ → → → → → →
HTML
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}
Вывод: -
Текст не отображается, поскольку наследует непрозрачность от родительского div.
Решение ------------------- → → →
HTML
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}
Выход:
Текст отображается с тем же цветом, что и на фоне, потому что div не находится в прозрачном div
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}<div class="wrapper">
<h1>Question 5770341</h1>
</div>Вопрос не задан, если фон является цветом или изображением, но поскольку @Blowski уже ответил на цветные фоны, там взломают изображения ниже:
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');
Таким образом вы можете манипулировать цветом своей непрозрачности и даже добавлять приятные эффекты градиента.
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}<div class="wrapper">
<h1>Question 5770341</h1>
</div>Кажется, что элементы display: block не наследуют непрозрачность от родителей display: inline.
Может быть, потому что недействительная разметка и браузер тайно отделяют их? Потому что источник не показывает, что происходит. Я что-то пропустил?
Если вам нужно использовать изображение в качестве прозрачного фона, вы можете обойти его с помощью псевдоэлемента:
HTML
<div class="wrap">
<p>I have 100% opacity</p>
</div>
CSS
.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}
Мой ответ не о статическом макете parent-child, о анимации.
Сегодня я делал демонстрацию svg, и мне нужно было svg быть внутри div (потому что svg создается с родительской шириной и высотой div, чтобы анимировать путь вокруг), и этот родительский div должен был быть невидим во время анимации пути SVG (а затем этот div должен был animate opacity from 0 to 1, это самая важная часть). И поскольку родительский div с opacity: 0 скрывал мой svg, я наткнулся на этот взлом с опцией visibility (дочерний элемент с visibility: visible можно увидеть внутри родителя с visibility: hidden):
.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}
И затем, в js, вы удаляете класс .invisible с функцией тайм-аута, добавляя класс .opacity-zero, запускайте макет с чем-то вроде whatever.style.top; и удаляя класс .opacity-zero.
var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);
Лучше проверить это демо http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011
Ответы, кажется, сложны для меня, поэтому я написал следующее:
#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}
#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}
span {
color: white;
}<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div>Назначьте непрозрачность 1.0 рекурсивно с помощью:
div > div { opacity: 1.0 }
Пример:
div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>Для других людей, пытающихся сделать таблицу (или что-то), выглядят сфокусированными на одной строке с использованием непрозрачности. Как @Blowski сказал использовать цвет не непрозрачность. Посмотрите эту скрипту: http://jsfiddle.net/2en6o43d/
.table:hover > .row:not(:hover)