CSS에서 부모의 자식 불투명도를 상속하고 싶지 않습니다.

CSS의 부모로부터 자식 불투명도를 상속하고 싶지 않습니다.

부모 인 하나의 div가 있고 첫 번째 div 안에 자식 인 다른 div가 있습니다.

부모 div에서 opacity 속성을 설정하고 싶지만 자식 div가 opacity 속성을 상속하지는 않습니다.

어떻게해야합니까?

불투명도를 사용하는 대신 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를 사용하여 부모 div에서 모든 자식을 제거한 다음 자식 요소를 더 이상 해당 요소의 자식이 아닌 원래 위치로 다시 배치합니다.

나에게 이것은 최후의 수단이되어야한다. 그러나 누군가 이것을하기를 원한다면 이것을하는 것이 재미있을 것이라고 생각했다.

부모가 투명하고 자녀가 동일하지만 독점적으로 정의되기를 원할 경우 약간의 트릭이 있습니다 (예 : 선택 드롭 다운의 사용자 에이전트 스타일을 덮어 쓰기).

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

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

자식 요소의 불투명도는 부모 요소에서 상속됩니다.

그러나 css position 속성을 사용하여 성과를 달성 할 수 있습니다.

텍스트 컨테이너 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에 없기 때문에 텍스트가 배경과 동일한 색상으로 표시됩니다.

배경이 색상 또는 이미지인지 여부에 대한 질문은 정의되지 않았지만 @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부모 로부터 불투명도를 상속받지 않는 것 같습니다 .

코드 펜 예

유효하지 않은 마크 업이고 브라우저가 비밀리에 분리하고 있기 때문일 수 있습니다. 소스는 그런 일을 보여주지 않기 때문입니다. 뭔가 빠졌습니까?

위의 답변은 나에게 복잡한 것처럼 보이므로 이것을 썼습니다.

#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의 직접 자식에 대한 불투명도를 설정하는 것입니다. 코드에서 :

<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 및 배경 이미지로 색상 불투명도를 수정하십시오.

이미지를 투명 배경으로 사용해야하는 경우 의사 요소를 사용하여 이미지를 해결할 수 있습니다.

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는 부모의 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

Mac 에서는 미리보기 편집기를 사용 하여 .png 이미지 위에 놓인 흰색 사각형에 불투명도를 적용하여 .css에 넣을 수 있습니다.

1) 이미지
로고

2) 이미지 주위에 사각형 만들기 로고 주위에
Rectanle

3) 배경색을 흰색
사각형으로 흰색으로 바

4 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)