Tôi không muốn thừa hưởng độ mờ đục con từ cha mẹ trong CSS

Tôi không muốn thừa hưởng độ mờ đục con từ cha mẹ trong CSS.

Tôi có một div là cha mẹ và tôi có một div khác bên trong div đầu tiên là con.

Tôi muốn đặt thuộc tính opacity trong div cha, nhưng tôi không muốn div con kế thừa thuộc tính opacity.

Làm thế nào tôi có thể làm điều đó?

Thay vì sử dụng độ mờ đục, hãy đặt màu nền với rgba, trong đó 'a' là mức độ trong suốt.

Vì vậy, thay vì:

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

sử dụng

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

Opacity không thực sự được kế thừa trong CSS. Đó là một biến đổi nhóm kết xuất lại. Nói cách khác, nếu <div>thiết lập độ mờ, bạn kết xuất div và tất cả các phần tử con của nó thành một bộ đệm tạm thời, sau đó kết hợp toàn bộ bộ đệm đó vào trang với cài đặt độ mờ cho trước.

Chính xác những gì bạn muốn làm ở đây phụ thuộc vào kết xuất chính xác mà bạn đang tìm kiếm, điều này không rõ ràng từ câu hỏi.

Như những người khác đã đề cập trong chủ đề này và các chủ đề tương tự khác, cách tốt nhất để tránh vấn đề này là sử dụng RGBA / HSLA hoặc sử dụng PNG trong suốt.

Nhưng, nếu bạn muốn một giải pháp lố bịch, tương tự như giải pháp được liên kết trong một câu trả lời khác trong chủ đề này (cũng là trang web của tôi), đây là một tập lệnh hoàn toàn mới mà tôi đã viết để khắc phục vấn đề này một cách tự động, được gọi là thatsNotYoChild.js:

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

Về cơ bản, nó sử dụng JavaScript để loại bỏ tất cả trẻ em khỏi div cha, sau đó định vị lại các phần tử con trở lại vị trí chúng cần mà không thực sự là con của phần tử đó nữa.

Đối với tôi, đây nên là phương sách cuối cùng, nhưng tôi nghĩ sẽ rất vui nếu viết một cái gì đó đã làm điều này, nếu có ai muốn làm điều này.

Một mẹo nhỏ nếu cha mẹ bạn minh bạch và bạn muốn con bạn giống nhau, nhưng được xác định riêng (ví dụ: ghi đè lên các kiểu tác nhân người dùng của danh sách thả xuống được chọn):

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

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

Độ mờ của phần tử con được kế thừa từ phần tử cha.

Nhưng chúng ta có thể sử dụng tài sản vị trí css để thực hiện thành tích của chúng tôi.

Có thể đặt div bộ chứa văn bản bên ngoài div cha nhưng với định vị tuyệt đối chiếu hiệu ứng mong muốn.

Yêu cầu lý tưởng ------------------ >>>>>>>>>>>>

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;

               }

Đầu ra: -

Văn bản không hiển thị vì kế thừa độ mờ từ div cha.

Giải pháp ------------------- >>>>>>

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

Đầu ra:

Văn bản hiển thị với cùng màu với nền vì div không nằm trong div trong suốt

Câu hỏi không được xác định nếu nền là màu hoặc hình ảnh nhưng vì @Blowski đã trả lời cho nền màu, nên có một bản hack cho hình ảnh bên dưới:

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');

Bằng cách này, bạn có thể điều khiển màu sắc của độ mờ và thậm chí thêm các hiệu ứng chuyển màu đẹp mắt.

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

Có vẻ như display: blockcác yếu tố không thừa hưởng độ mờ đục từ display: inlinecha mẹ.

Ví dụ Codepen

Có lẽ bởi vì nó đánh dấu không hợp lệ và trình duyệt đang bí mật tách chúng? Bởi vì nguồn không cho thấy điều đó xảy ra. Tui bỏ lỡ điều gì vậy?

Câu trả lời ở trên có vẻ phức tạp đối với tôi, vì vậy tôi đã viết điều này:

#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đó là cha mẹ (độ mờ đục) pop-upcủa bạn , đó là con cái (không có độ mờ đục) của bạn. Tất cả mọi thứ bên dưới nó là phần còn lại của trang web của bạn.

Không có một cách tiếp cận phù hợp với tất cả các kích thước, nhưng một điều mà tôi thấy đặc biệt hữu ích là thiết lập độ mờ cho trẻ em trực tiếp của div, ngoại trừ phương pháp mà bạn muốn giữ cho hiển thị đầy đủ. Trong mã:

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

và css:

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

Trong trường hợp bạn có màu nền / hình ảnh trên cha mẹ, bạn sửa độ mờ màu bằng rgba và hình nền bằng cách áp dụng các bộ lọc alpha

Nếu bạn phải sử dụng hình ảnh làm nền trong suốt, bạn có thể xử lý xung quanh nó bằng phần tử giả:

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

Câu trả lời của tôi không phải là về bố cục cha-con tĩnh, mà là về hình ảnh động.

Tôi đã thực hiện một bản demo Svg ngày hôm nay và tôi cần Svg ở bên trong div (bởi vì Svg được tạo ra với chiều rộng và chiều cao div của cha mẹ, để tạo hiệu ứng cho đường dẫn xung quanh), và div cha mẹ này cần phải vô hình trong hoạt hình đường dẫn của Svg (và sau đó div này được cho là animate opacity from 0 to 1, đó là phần quan trọng nhất). Và bởi vì div cha mẹ opacity: 0đã che giấu Svg của tôi, tôi đã bắt gặp bản hack này với visibilitytùy chọn (con visibility: visiblecó thể nhìn thấy bên trong cha mẹ với 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;
}

Và sau đó, trong js, bạn loại bỏ .invisiblelớp với chức năng hết thời gian, thêm .opacity-zerolớp, kích hoạt bố cục với một cái gì đó giống như whatever.style.top;và loại bỏ .opacity-zerolớp.

var $main = $(".main");
  setTimeout(function() {
    $main.addClass('opacity-zero').removeClass("invisible");
    $(".test-svg").hide();
    $main.css("top");
    $main.removeClass("opacity-zero");
  }, 3000);

Tốt hơn để kiểm tra bản demo này http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Trên mac, bạn có thể sử dụng Trình chỉnh sửa bản xem trước để áp dụng độ mờ cho hình chữ nhật màu trắng đặt trên hình ảnh .png của bạn trước khi bạn đặt nó vào .css.

1)
Logo hình ảnh

2) Tạo hình chữ nhật xung quanh hình ảnh
Rectanle xung quanh logo

3) Thay đổi màu nền thành
hình chữ nhật màu trắng chuyển sang màu trắng

4) Điều chỉnh hình mờ đục hình chữ nhật

Gán opacity 1.0 cho trẻ theo cách đệ quy với:

div > div { opacity: 1.0 }

Thí dụ:

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>

Đối với những người khác đang cố gắng tạo một bảng (hoặc một cái gì đó) trông tập trung vào một hàng bằng cách sử dụng độ mờ. Giống như @Blowski nói sử dụng màu sắc không mờ. Kiểm tra câu đố này: http://jsfiddle.net/2en6o43d/

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