ฉันไม่ต้องการรับค่าความทึบของเด็กจากพาเรนต์ใน CSS

ฉันไม่ต้องการรับค่าความทึบของเด็กจากพาเรนต์ใน CSS

ฉันมีกองหนึ่งซึ่งเป็นพ่อแม่และฉันมีอีกกองหนึ่งในกองแรกซึ่งก็คือเด็ก

ฉันต้องการตั้งค่าคุณสมบัติความทึบใน div parent แต่ฉันไม่ต้องการให้ div ลูกสืบทอดคุณสมบัติความทึบแสง

ฉันจะทำสิ่งนั้นได้อย่างไร

แทนที่จะใช้ความทึบให้ตั้งค่าสีพื้นหลังด้วย 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/

โดยพื้นฐานแล้วมันใช้จาวาสคริปต์ในการลบลูกทั้งหมดออกจาก div parent แล้วเปลี่ยนตำแหน่งองค์ประกอบย่อยกลับไปที่ที่ควรจะเป็นโดยไม่ต้องเป็นลูกขององค์ประกอบนั้นอีกต่อไป

สำหรับฉันนี่ควรจะเป็นทางเลือกสุดท้าย แต่ฉันคิดว่ามันคงจะสนุกถ้าได้เขียนอะไรบางอย่างที่ทำได้ถ้ามีใครต้องการทำแบบนี้

เคล็ดลับเล็กน้อยหากผู้ปกครองของคุณโปร่งใสและคุณต้องการให้ลูกของคุณเหมือนกัน แต่กำหนดไว้เฉพาะ (เช่นเขียนทับสไตล์ตัวแทนผู้ใช้ของดรอปดาวน์ที่เลือก):

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

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

ความทึบขององค์ประกอบย่อยได้รับมาจากองค์ประกอบหลัก

แต่เราสามารถใช้คุณสมบัติตำแหน่ง CSS เพื่อบรรลุความสำเร็จของเรา

div คอนเทนเนอร์ข้อความสามารถวางไว้ด้านนอกของ parent 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 parent

โซลูชัน ------------------- >>>>>>

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ผู้ปกครอง

ตัวอย่าง 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 ยกเว้นสิ่งที่คุณต้องการให้มองเห็นได้อย่างเต็มที่ ในรหัส:

<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 path (จากนั้น 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) ปรับความทึบแสงของรูปสี่เหลี่ยมผืนผ้าทึบ
แสง

กำหนดความทึบ 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)