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

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

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

저는 부모인 div가 하나 있고, 첫번째 div 안에 아이인 다른 div가 있습니다.

부모 div에서 불투명 속성을 설정하고 싶지만 자식 div가 불투명 속성을 상속하지 않았으면 합니다.

내가 어떻게 그럴 수 있을까?

불투명도를 사용하는 대신 rgba로 배경색을 설정합니다. 여기서 'a'는 투명도 수준입니다.

그래서 대신에:

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

사용하다

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

불투명도는 실제로 CSS에서 상속되지 않습니다.이것은 렌더링 후 그룹 전환입니다. 약에▁in.<div>불투명도 설정을 사용하여 div와 모든 하위 항목을 임시 버퍼로 렌더링한 다음 해당 버퍼 전체를 지정된 불투명도 설정으로 페이지에 합성합니다.

여기서 정확히 무엇을 하고 싶은지는 여러분이 찾고 있는 정확한 렌더링에 따라 달라지는데, 이는 질문에서 명확하지 않습니다.

부모가 투명하고 자녀가 동일하지만 배타적으로 정의되기를 원하는 경우(예: 선택한 드롭다운의 사용자 에이전트 스타일을 덮어쓰는 경우) 약간의 속임수:

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

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

다른 사람들이 이 스레드와 다른 유사한 스레드에서 언급했듯이, 이 문제를 방지하는 가장 좋은 방법은 RGBA/HSLA를 사용하거나 투명한 PNG를 사용하는 것입니다.

하지만 이 스레드의 다른 답변(내 웹 사이트이기도 함)에 연결된 것과 유사한 우스꽝스러운 해결책을 원한다면 여기 NotYoChild.js라는 새로운 스크립트가 있습니다.

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

기본적으로 JavaScript를 사용하여 상위 div에서 모든 하위 요소를 제거한 다음 하위 요소를 더 이상 해당 요소의 하위 요소가 되지 않고 원래 위치로 다시 배치합니다.

저에게는 이것이 최후의 수단이 되어야 하지만, 만약 누군가가 이것을 하고 싶어한다면, 이것을 하는 무언가를 쓰는 것이 재미있을 것이라고 생각했습니다.

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

하지만 우리는 우리의 성취를 달성하기 위해 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>

하나의 크기로 모두 맞는 접근법은 없지만, 제가 특히 유용하다고 생각한 한 가지는 디브의 직접적인 아이들을 위해 불투명도를 설정하는 것입니다. 단, 여러분이 완전히 볼 수 있게 하고 싶은 접근법은 예외입니다.코드:

<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로 색상 불투명도를 수정하고 배경 이미지를 수정합니다.

위의 답변은 저에게 복잡해 보여서 이렇게 썼습니다.

#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그것은 당신의 (불투명성이 없는) 아이들입니다.그 아래에 있는 모든 것들은 당신의 사이트의 나머지 부분입니다.

아래 작업 내용:

1. 변경되었다.

시작:

opacity: 0.52;
background-color: #7c7c7c;

받는 사람:

opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;

변환하기hex & opacity로.rgba,
http://hex2rgba.devoth.com/ 과 같은 웹사이트를 사용합니다.

저도 같은 문제에 직면했습니다. 구글링을 한 후 이 문제에 대한 몇 가지 해결책(3-ways)을 찾았습니다.여기서 솔루션을 공유하고 있습니다. 이 중 하나를 사용해 보십시오.

옵션-1: 이전 또는 이후의 유사 마크업 요소를 배경으로 사용합니다.

.parentContainer {
    position: relative;
}
.parentContainer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.6;
}
.childContent {
    position: relative;
    color: red;
    z-index: 1;
}

옵션-2: 불투명도 대신 알파 값이 있는 argba 색상을 사용합니다.

 <div id="parentContainer" style="background: rgba(255,255,255,0.6);">
    <div id="childContent">
         Content ...
    </div>
 </div>

옵션-3: 한 요소가 다른 요소 위에 절대 위치한 배경 div를 사용합니다.

<div class="parentContainer">
  <div class="childContent">
    Here is the content.
  </div>
  <div class="background"></div>
</div>


.parentContainer {
  position: relative;
}
.childContent {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  opacity: .5;
}

는 것 같습니다.display: block요소가 불투명도를 상속하지 않음display: inline부모님.

코데펜 예제

아마도 그것이 잘못된 마크업이고 브라우저가 그것들을 비밀리에 분리하기 때문일 것입니다.왜냐하면 출처는 그런 일이 일어나는 것을 보여주지 않기 때문입니다.내가 뭘 빼놓았나요?

<!--Background opacity-->
<style>
    .container1 {
        width: 200px;
        height: 200px;
        background: rgba(0, 0, 0, .5);
        margin-bottom: 50px;
    }
</style>
<div class="container1">
    <div class="box1">Text</div>
</div>

<!--Before, after, z-index opacity-->
<style>
    .container2 {
        width: 200px;
        height: 200px;
        position: relative;
        margin-bottom: 100px;
    }

    .container2:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: black;
        opacity: .5;
        z-index: 1;
    }

    .box2 {
        position: relative;
        z-index: 2;
    }
</style>
<div class="container2">
    <div class="box2">Text</div>
</div>

<!--Outline opacity-->
<style>
    .container3 {
        width: 200px;
        height: 200px;
        outline: 50px solid rgba(0, 0, 0, .5);
        margin: 50px;
    }

    .box3 {
        position: relative;
        left: -16px;
    }
</style>
<div class="container3">
    <div class="box3">Text</div>
</div>

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

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가장 중요한 부분입니다.)그리고 부모님의 디비가opacity: 0내 svg를 숨기고 있었고, 나는 이 해킹을 우연히 발견했습니다.visibility(이) 있는 )visibility: visible에서 의부내볼수있다습니를부모▁parent▁▁seen▁with▁can다▁be니습있수의를 볼 수 있습니다.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

먼저 빛바랜 이미지를 생성하고 저장하여 CSS 배경에 사용함으로써 이 문제를 해결했습니다.다음 파이썬 코드를 사용했습니다.

from PLI import Image
bg = Image.open('im1.jpg')
fg = Image.open('im2.jpg')
#blend at ratio .3
Image.blend(bg,fg,.3).save('out.jpg')

여기서 im1.jpg는 단순히 im2.jpg와 동일한 차원의 흰색 이미지였습니다.

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

이미지
로고

.
주변에 의 직사각형 모양입니다.

합니다.
직사각형 흰색으로 바뀜

불투명도
이미지

불투명도를 사용하여 테이블(또는 다른 것)을 한 행에 초점을 맞추려고 하는 다른 사용자를 위해 사용됩니다.@Blowski가 말한 것처럼 불투명도가 아닌 색상을 사용합니다.이 바이올린을 확인해 보세요: http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)

불투명도 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>

언급URL : https://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css