Jquery 子div不继承父级不透明度

为什么

。注意

会继承不透明度？如果我把它放在容器外面，它就会失去淡入效果。我想看到红色的盒子完全不透明，黑色的容器略微透明：可能吗？怎么做

非常感谢

---

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

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

---

请参阅：

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

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

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

一些通知！

---

使

#showMe

和

#showMeWrapper

具有相同的尺寸和位置，但保持

showMeWrapper

没有任何样式（透明背景、无边框等）。仅为

#showMe

元素设置动画。如果您希望设置尺寸或位置更改的动画，请同时设置两者的动画。

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

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

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

一些通知！

---

使

#showMe

和

#showMeWrapper

具有相同的尺寸和位置，但保持

showMeWrapper

没有任何样式（透明背景、无边框等）。仅为

#showMe

元素设置动画。如果您希望设置尺寸或位置更改的动画，请同时设置这两个属性的动画。

不透明度属性-根据我的经验，以及在某些信息中，（例如：）始终是继承的

试想一下：你想让某个元素半透明，不透明度=0.5，你希望看到什么？从逻辑上讲，所有元素都是半透明的。否则，你必须使里面的每一件物品都是半透明的

因此，您的示例有两种解决方案：

您可以将通知容器设置为不透明度：1（100%不透明度），但可以设置半透明背景色，如下所示：

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

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

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

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

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

/*阴影样式*/
注意你的影子
{
位置：固定；
z指数：9000；
左：0px；右：0px；顶部：0px；底部：0px；
背景：黑色；
不透明度：0.7；
显示：无；
}
/*注意本身的风格*/
.通知
{
位置：固定；
z指数：9001；
左侧：50%；顶部：50%；/*屏幕中央的居中通知*/
宽度：200px；
高度：100px；
左边距：-100px；/*用于定心的参数的第二部分*/
利润上限：-50px；
背景：红色；
颜色：白色；
显示：无；
}
$（函数（）{
美元（“.notice”）.fadeIn（1000）；
$（'.notice_shadow'）.fadeIn（1000）；
});
你好，这是通知！

试试看，也许我会更简单

---

顺便说一句，如果你试着做一些简单的“模态”通知——有很多现成的实现，例如（不是我自己的，只是一个好的）

opacity属性——根据我的经验，在一些信息中，（比如：）总是被继承的

试想一下：你想让某个元素半透明，不透明度=0.5，你希望看到什么？从逻辑上讲，所有元素都是半透明的。否则，你必须使里面的每一件物品都是半透明的

因此，您的示例有两种解决方案：

您可以将通知容器设置为不透明度：1（100%不透明度），但可以设置半透明背景色，如下所示：

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

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

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

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

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

/*阴影样式*/
注意你的影子
{
位置：固定；
z指数：9000；
左：0px；右：0px；顶部：0px；底部：0px；
背景：黑色；
不透明度：0.7；
显示：无；
}
/*注意本身的风格*/
.通知
{
位置：固定；
z指数：9001；
左侧：50%；顶部：50%；/*屏幕中央的居中通知*/
宽度：200px；
高度：100px；
左边距：-100px；/*用于定心的参数的第二部分*/
利润上限：-50px；
背景：红色；
颜色：白色；
显示：无；
}
$（函数（）{
美元（“.notice”）.fadeIn（1000）；
$（'.notice_shadow'）.fadeIn（1000）；
});
你好，这是通知！

试试看，也许我会更简单

---

顺便说一句，如果你试着做一些简单的“模态”通知——有很多可以使用的实现，例如（不是我自己的，只是一个好的）

这里，我根据我最初的绝对定位记录制作了一个快速示例：

没有太多复杂的问题需要你去解决

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

---

在这里，我根据我最初的绝对定位记录制作了一个快速样本：

没有太多复杂的问题需要你去解决

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

---

可能受骗：孩子从父母那里继承。我已经看到了这个问题：没有提到使用jq动画，这使得答案不可能（据我所知）。jq动画在这里并不重要。尝试不使用动画。问题仍然存在。这里还有另一个问题：找到解决方案是很重要的：这个问题当然是纯CSS，但是，如果你没有注意到的话，CSS是通过jQuery动画的，这使得一切都不同。可能的重复：孩子们从父母那里继承。我已经看到了这个问题：没有提到使用jq动画，这使得答案不可能（据我所知）.jQ动画在这里不重要。尝试不使用动画。问题仍然存在。这里还有另一个问题：找到解决方案很重要：当然问题是纯CSS，但是，如果你没有注意到，CSS是通过jQuery动画的，这让一切都不一样。+1-我想如果我找到了这个解决方案，我会坚持使用这个黑客解决方案