Question

所以，我花了无数个小时试图阻止div或iframe中的幻灯片继承来自页面css的透明度。我已经尝试过使用z-index，绝对/相对定位...所有都没有失败。从我的研究中了解到，默认情况下，firefox中的iframe将从父级继承，但IE不会继承，默认情况下将使用白色背景;所以我切换到使用div，结果相同。我正在使用firefox进行所有初步测试。什么是hapening是slidshow从css继承透明度，所以我能通过幻灯片显示背景图像。

这是相关代码：

CSS

* { margin: 0; padding: 0; }

html { 
    background: url(blue_water.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#Slideshow1 img {
    width:379px;
    z-index:12;
 }

#page-wrap {
    width: 660px;
    margin: 50px auto;
    padding: 15px; 
    background: white;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */

    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;
    box-shadow: 0 0 20px black;
}

HTML

<div id="slideshow">
    <div style="float:right">
        <div style="margin: 0 auto; width: 400px; height: 310px; overflow:auto;">
            <object type="text/html" data="slideshow.html" style="width:100%; height:300px; z-index:12; margin:0;"></object>
        </div>
    </div>
</div>

Answer 1

这可能无法解决所有浏览器的问题，但我所做的是淡化背景颜色本身而不是整个元素，例如。

      background: none repeat scroll 0 0 rgba(18, 18, 18, 0.7);

最后一个值是不透明度，范围从0.1到1.0

Answer 2

首先回答你的问题：为什么不在页面换行div之前放置幻灯片div并使用幻灯片放映上的绝对定位将其移动到需要的位置。那就是：

<div class="relative position">
    <div class="slideshow"> <!--absolute position -->
    </div> <!-- end slideshow -->

    <div class="page-wrap">
        content
    </div> <!-- end page-wrap -->
</div> <!-- end relative position div -->

如果你使'relative position'容器div的宽度，高度，定位与页面换行div相同，那么你应该能够移动绝对div，就好像它在实际的页面换行div中一样。您可能必须将绝对div的z-index优先于其他所有内容。

此外，如果这是您的实际代码，我将不会使用内部或内联样式;我会将所有的CSS都放在外部文件中。它更快更容易理解。

需要阻止包含幻灯片的div或iframe的不透明度继承

2 个答案: