-2

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

话虽如此，我正在尝试将 4 个不同的 div 放在一起。每个 div 都有不同的 z-index，因此它们将一层一层地层叠。如果我关于不透明度的说法是正确的，那么任何包含不透明度的层都将始终被迫坐在上面——使整个图片具有不透明的质量。

我的问题是：有没有办法欺骗计算机呈现不透明，而不是不透明的质量？

这是我的 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/

谢谢您的帮助。

4

2 回答 2

0

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

于 2013-09-23T05:42:13.863 回答
-1

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

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

<div id="soICanPostFiddle"></div>
于 2013-09-23T06:56:40.073 回答