如何阻止孩子繼承父級不透明度

Question

我很難弄清楚如何阻止子元素繼承父級不透明度。

我知道這已經被回答過了，設置背景而不是不透明度值。 但是我的情況有所不同，因為我必須在包含子元素的粘性標頭中使用淡入效果。

當我添加淡入時，孩子們也獲得相同的效果。

這是一些測試代碼：

 $('.nav-items').css('opacity', '0.3'); var top_nav = $("body, html").scrollTop(); (function () { var $win = $(window); $win.on('scroll', function () { var header = $(".nav-items"); if ($(this).scrollTop() > 40) { if (!header.data('faded')) header.data('faded', 1).not('nav-item li').stop(true).fadeTo(400, 1); } else if (header.data('faded')) { header.data('faded', 0).stop(true).fadeTo(400, 0.3); } }); }).call(this); 

 body { margin:0; padding:0; } .nav-items { font-weight: 900; background-color: rgba(0, 0, 0, 1); position: fixed; width: 100%; top: 0; z-index: 1000; } .nav-items ul { max-width: 960px; margin: 0; padding: 0; margin: 0 auto; } .nav-items ul li { cursor: pointer; margin: 0; padding: 20px 45px; width: 19%; font-weight: 400; text-align: center; display: inline-block; box-sizing: border-box; color: #fff; vertical-align: top; text-transform: uppercase; } .nav-items ul li.bigger { cursor: default; text-transform: lowercase; width: 20%; padding: 0; height: inherit; position: relative; top: 15px; /* vertical-align: bottom; */ } .nav-items ul li.bigger img { height: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="nav-items"> <ul> <li id="l_1">How it Works</li> <li id="l_2">How to be a driver</li> <li id="l_3">The Community</li> <li id="l_4">Contact Us</li> </ul> </div> <div>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem</div> 

Answer 1

您不能阻止圖層繼承不透明度。 唯一的解決方法是設置rgb背景顏色。 如果子元素也繼承了此元素，則可以使用CSS來簡單地覆蓋它。

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";

Answer 2

假設您希望菜單位於窗口頂部時具有覆蓋效果； 只需在菜單中添加一個單獨的overlay元素並為其添加效果-而不是將其定位為父元素

 <div id="overlay"></div> #overlay { position: absolute; height: 100%; width: 100%; background:black; z-index:-1; opacity:0.3; } 

http://jsfiddle.net/10bo1me5/3/

更新的代碼

 var top_nav = $("body, html").scrollTop(); (function () { var $win = $(window); $win.on('scroll', function () { var header = $("#overlay"); if ($(this).scrollTop() > 40) { if (!header.data('faded')) header.data('faded', 1).not('nav-item li').stop(true).fadeTo(400, 1); } else if (header.data('faded')) { header.data('faded', 0).stop(true).fadeTo(400, 0.3); } }); }).call(this); 

 #overlay { position: absolute; height: 100%; width: 100%; background:black; z-index:-1; opacity:0.3; } .nav-items { font-family: Roboto; font-weight: 900; /*background-color: rgba(0, 0, 0, 1);*/ position: fixed; width: 100%; top: 0; z-index: 1000; } .nav-items ul { max-width: 960px; margin: 0; padding: 0; margin: 0 auto; } .nav-items ul li { cursor: pointer; margin: 0; padding: 20px 45px; width: 19%; font-weight: 400; text-align: center; display: inline-block; box-sizing: border-box; color: #fff; vertical-align: top; text-transform: uppercase; } .nav-items ul li.bigger { cursor: default; text-transform: lowercase; width: 20%; padding: 0; height: inherit; position: relative; top: 15px; /* vertical-align: bottom; */ } .nav-items ul li.bigger img { height: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav-items"> <div id="overlay"></div> <ul> <li id="l_1">How it Works</li> <li id="l_2">How to be a driver</li> <li id="l_3">The Community</li> <li id="l_4">Contact Us</li> </ul> </div> <div>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>