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

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

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

답변

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>