子 div 不继承父不透明度

Question

<div class="notice_container" id="showMe">
    <div class="notice">some notice!</div>
</div>

JSFiddle here.（点击“运行”查看动画）

我需要.notice 不继承其父 CSS 不透明度。请注意，不透明度是用 jQuery animate 分配给.notice_container的。

$('#showMe').css({
    "opacity": 0,
    "display": "block"
}).animate({
    opacity: .7
}, 1200)

为什么.notice 会继承不透明度？如果我将它放在它的容器之外，它会失去淡入效果。我想看到红色盒子完全不透明，黑色容器稍微透明：这可能吗？怎么做？

非常感谢。

---

不起作用的解决方案 - 这将解决固有问题，但 jQuery 无法为其设置动画。

$('#showMe').css({
    backgroundColor: "rgba(0, 0, 0, 0)",
    "display": "block"
}).animate({
    backgroundColor: "rgba(0, 0, 0, 1)"
}, 1200);

见：http://jsfiddle.net/Bbw7r/1/

Answer 1

我认为不可能不对元素的某些内容应用不透明度。您可以做的是复制包含元素，如下所示：

<div class="notice_container" id="showMe"></div>
<div class="notice_wrapper" id="showMeWrapper">
    <div class="notice">some notice!</div>
</div>

使#showMe 和#showMeWrapper 具有相同的尺寸和相同的位置，但使showMeWrapper 没有任何样式（透明背景、无边框等）。仅对 #showMe 元素进行动画处理。如果您希望对尺寸或位置更改进行动画处理，请同时制作动画。

Answer 2

在这里，我根据我对绝对定位的原始记录做了一个快速示例：

http://jsfiddle.net/Bbw7r/5/

没有太多复杂性供您解决。

<div class="notice_container handle" id="showMe"></div>
<div class="notice handle">some notice!</div>

$('.handle').show().delay(500).fadeTo('slow', 0.7);

（延迟只是为了让你看看发生了什么）

更新：我错过了队列：

$('.handle').show().animate({opacity: .7}, {queue: false, duration: 1200});
$('.notice').animate({opacity: 1}, {queue: false, duration: 1200});

Answer 3

opacity 属性 - 根据我的经验，以及在某些信息中，（例如：http://www.w3schools.com/cssref/css3_pr_opacity.asp） - 总是被继承。

想一想：您想让一些元素半透明，并使其 opacity=0.5，您希望看到什么？从逻辑上讲，所有元素都是半透明的。否则，您必须将其中的每个项目都设为半透明。

所以，您的示例有 2 个解决方案：

1. 您可以将您的 notice_container 设置为 opacity:1（100% 不透明度），但设置半透明背景色，如下所示：

   .notice_container
   {
       background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black color */
   }
   

这种颜色的动画可以用jQuery-UI来实现（它允许动画颜色属性，但我没有测试过）

1. 我正在使用其他方法：我的背景和通知块放置在一个级别，而不是嵌套。像这样：

   <style>
   /* Style for shadow */
   .notice_shadow
   {
     position:fixed;
     z-index:9000;
     left:0px; right:0px; top:0px; bottom:0px;
     background: black;
     opacity:0.7;
     display:none;
   }
   /* Style for notice itself */
   .notice
   {
     position:fixed;
     z-index:9001;
     left:50%; top:50%; /* centering notice in the center of the screen */
     width:200px;
     height:100px;
     margin-left:-100px; /* the second part of parameters used for centering*/
     margin-top:-50px;
     background: red;
     color:white;
     display:none;
   }
   </style>
   <script>
   $(function(){
      $('.notice').fadeIn(1000);
      $('.notice_shadow').fadeIn(1000);
   });
   </script>
   <div class='notice_shadow'></div>
   <div class='notice'>Hello, this is a notice!</div>
   

试试吧，也许我会更简单。

顺便说一下，如果您尝试制作简单的“模态”通知 - 有很多可供使用的实现，例如 https://github.com/samdark/the-modal（不是我自己的，只是一个好）