Question

我的理解是，当不透明度应用于div时，计算机会在所有其他div（或图层）的顶部（或表面级别）上呈现div。

话虽如此，我试图将4个不同的div放在一起。每个div都有不同的z索引，因此它们将一个层叠在另一个之上。如果我关于不透明度的陈述是真的，那么任何包含不透明度的图层将总是被迫坐在上面 - 使整个图片具有不透明的质量。

我的问题是：有没有办法欺骗计算机渲染不透明度，没有不透明的质量？

这是我的HTML：

<div id="wrapper">

<div id="subWrapper1">
    <div id="cyan">
        <img src="images/cyanObama.png" alt="Cyan Version" />
    </div>

    <div id="magenta">
        <img src="images/magentaObama.png" alt="magenta version" />
    </div>
</div>

<div id="subWrapper2">
    <div id="yellow">
        <img src="images/yellowObama.png" alt="yellow version" />
    </div>

    <div id="black">
        <img src="images/blackObama.png" alt="black version" />
    </div>
</div>

</div>

这是CSS：

#subWrapper1{position: relative;
    display: block;}

#subWrapper2{margin-top: 262px;
    position: relative;
    display: block;}

#cyan{width: 555px;
    height: 555px;
    margin: 0;
    position: relative;
    display: inline-block;
    z-index: 10;}

#magenta{width: 555px;
    height: 555px;
    position: relative;
    display: inline-block;
    opacity: .7;}

#yellow{width: 555px;
    height: 555px;
    position: relative;
    display: inline-block;
    z-index: 20;
    opacity: .5;}

#black{
    width: 555px;
    height: 555px;
    position: relative;
    display: inline-block;
    z-index: 30;}

这是一个JSFiddle：http://jsfiddle.net/hz2xy/1/

感谢您的帮助。

Answer 1

在Photoshop中使用透明度创建图像，并将背景应用于要应用不透明度的div，并删除该div的不透明度属性。

Answer 2

我使用-webkit-filter来调整各个级别的亮度和对比度。做了一些试验和错误，但我得到了它的工作。

这是JSFiddle：http://jsfiddle.net/hz2xy/2/

<div id="soICanPostFiddle"></div>

如何解决不透明度问题？

2 个答案: