0

所以，我花了无数个小时试图阻止 div 或 iframe 中的幻灯片从页面 css 继承透明度。我尝试过使用 z-index、绝对/相对定位……都没有成功。从我的研究中了解到，Firefox 中的 iframe 默认情况下会从父级继承，但 IE 不会继承，默认情况下会使用白色背景；所以我切换到使用 div，结果相同。我正在使用 Firefox 进行所有初始测试。最重要的是幻灯片从 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>​
4

2 回答 2

1

首先回答您的问题：为什么不将幻灯片 div 放在 page-wrap 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 -->

如果您使“相对位置”容器 div 与页面换行 div 具有相同的宽度、高度和定位，那么您应该能够移动绝对 div，就好像它在实际的页面换行 div 中一样。您可能必须对绝对 div 进行 z-index 索引。

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

于 2012-06-12T23:56:52.200 回答
1

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

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

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

于 2012-06-12T23:46:48.853 回答