Я не хочу успадковувати непрозорість дитини від батьків у CSS

Я не хочу успадковувати непрозорість дитини від батьків у CSS.

У мене є один дів, який є батьківським, і у мене є ще один дів всередині першого діва, який є дитиною.

Я хочу встановити властивість непрозорості у батьківському ділі, але я не хочу, щоб дочірній діл успадкував властивість непрозорості.

Як я можу це зробити?

Замість використання непрозорості встановіть колір тла за допомогою rgba, де "a" - рівень прозорості.

Тож замість:

background-color: rgb(0,0,255); opacity: 0.5;

використання

background-color: rgba(0,0,255,0.5);

Непрозорість насправді не успадковується у CSS. Це перетворення групи після надання. Іншими словами, якщо встановлено <div>непрозорість, ви перетворюєте div та всіх його дітей у тимчасовий буфер, а потім складаєте весь цей буфер на сторінку із заданим налаштуванням непрозорості.

Що саме ви хочете тут зробити, залежить від точного відображення, яке ви шукаєте, що не зрозуміло з питання.

Як вже згадували інші у цій та інших подібних нитках, найкращий спосіб уникнути цієї проблеми - використовувати RGBA / HSLA або ж використовувати прозорий PNG.

Але, якщо ви хочете смішне рішення, схоже на те, що пов’язане в іншій відповіді в цій темі (яка також є моїм веб-сайтом), ось абсолютно новий сценарій, який я написав, що вирішує цю проблему автоматично, званий thatsNotYoChild.js:

http://www.impressivewebs.com/fixing-parent-child-opacity/

В основному він використовує JavaScript для видалення всіх дітей з батьківського діла, а потім переставляє дочірні елементи туди, де вони повинні бути, фактично вже не є дітьми цього елемента.

Для мене це повинно бути в крайньому випадку, але я думав, що було б весело написати щось, що зробив це, якщо хтось захоче це зробити.

Невелика хитрість, якщо ваш батько прозорий і ви хочете, щоб ваша дитина була такою самою, але визначена виключно (наприклад, перезаписати стилі користувацьких агентів у випадаючому меню):

.parent {
     background-color: rgba(0,0,0,0.5);
}

.child {
     background-color: rgba(128,128,128,0);
}

Непрозорість дочірнього елемента успадковується від батьківського елемента.

Але ми можемо використовувати властивість позиції css для досягнення нашого досягнення.

Текстовий контейнер 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;

               }

Вихід: -

Текст не видно, оскільки успадковує непрозорість від батьківського діла.

Розв’язання ------------------- >>>>>>

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 не в прозорому розділі

Питання не визначило, чи є колір кольором чи зображенням, але оскільки @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батьків.

Приклад Codepen

Може, тому, що це недійсна розмітка і браузер таємно їх розділяє? Тому що джерело не показує, що відбувається. Я щось пропускаю?

Відповіді вище здаються мені складними, тому я написав це:

#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>

kb-mask-overlayце твій (непрозорість) батько, pop-upце твої (непрозорі) діти. Все, що знаходиться нижче, - це решта вашого сайту.

Немає підходу одного розміру, але одна річ, яку я вважаю особливо корисною, - це встановити непрозорість для прямих дітей, за винятком тієї, яку ви хочете повністю бачити. У коді:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
</div>

та css:

div.parent > div:not(.child1){
    opacity: 0.5;
}

Якщо у батьків є кольори фону / зображення, ви встановлюєте непрозорість кольорів за допомогою rgba та background-image, застосовуючи альфа-фільтри

Якщо вам доведеться використовувати зображення як прозорий фон, ви, можливо, зможете обійти його за допомогою псевдоелемента:

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%;
}

Моя відповідь не про статичний макет батько-дитина, а про анімацію.

Я робив демонстрацію svg сьогодні, і мені потрібно було, щоб SVG знаходився всередині div (адже SVG створюється з шириною та висотою діва батьків, щоб оживляти шлях навколо), і цей батьківський дів повинен був бути невидимим під час анімації шляху SVG (а потім цей дів повинен був 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

На mac ви можете скористатися редактором попереднього перегляду, щоб застосувати непрозорість до білого прямокутника, покладеного на ваше .png зображення, перш ніж помістити його у свій .css.

1) Зображення
логотип

2) Створіть прямокутник навколо зображення
Rectanle навколо логотипу

3) Зміна кольору фону на білий
прямокутник побілів

4) Відрегулюйте прямокутник непрозорість
непрозорого зображення

Призначайте дитині непрозорість 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)