css不透明度影响同胞图像不透明度 [英] css opacity affecting sibling image opacity

问题描述

我有一个简单的 div 有两个孩子，一个 div 有一个图像和另一个 div 如下：

 < div style =width：500px;& 
< div class =settingicon righty> 
< img src =/ images / icons / setting.png/> 
< / div> 
< div class =schedulepicker quat todaytoday> MONDAY< / div> 
< / div> 
  

我想让第二个 div 因此在我的CSS中，我的 .schedulpicker 有这个规则：

  .schedulepicker：hover {
 opacity：0.9; 
} 
  

问题是当它被徘徊时，兄弟图像也会改变透明度。为什么会这样？

编辑

这里是一个小提琴
http://jsfiddle.net/VUzg9/4/

我是开始怀疑它实际上可能是文件本身。

编辑2

使用jpg和gif测试，可能

解决方案

您需要设置位置默认为 static ）和 z-index 。

请参阅 jsfiddle

  .righty {
 float：right; 
 position：relative; 
 z-index：100; 
} 
  

您设置的不透明度 #schedulepicker 正在创建一个新的堆栈上下文，堆栈上下文影响z-index。由于您没有手动指定z索引，因此它们正在自动分配， #schedulepicker 的值比 #settingicon



W3C颜色模块说明了以下内容：

如果不透明度小于1的元素未定位，则
实现必须在父级
堆栈上下文中绘制它创建的图层，如果
是具有'z-index：0'和'opacity：1'的定位元素，则使用相同的堆叠顺序。

I have a simple div with two children, a div with an image and yet another div as below:

<div style="width: 500px;">
    <div class="settingicon righty">
        <img src="/images/icons/setting.png" />
    </div>
    <div class="schedulepicker quat todaytoday">MONDAY</div>
</div>

I wanted so that when the second div is hovered, it reduces its opacity to 0.9, so in my CSS my .schedulpicker has this rule:

.schedulepicker:hover {
    opacity: 0.9;
}

The problem is when it is hovered, the sibling image changes in opacity as well. Why is this so?

EDIT

Here's a fiddle http://jsfiddle.net/VUzg9/4/

i am starting to wonder could it actually be the file itself.

EDIT 2

tested with jpg and gif, probably not the image issue.

解决方案

You need to set the position (default is static) and a z-index for your image.

See jsfiddle

.righty {
    float: right;
    position: relative;
    z-index: 100;
}

The opacity you're setting on #schedulepicker is creating a new stacking context, and stacking contexts affect z-indexes. Since you didn't specify z-indexes manually, they're being auto assigned, and #schedulepicker has a higher value than #settingicon because it comes later in the markup.

EDIT

The W3C color module says the following:

If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.

这篇关于css不透明度影响同胞图像不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！