CSS3 RGBA 透明的div会使其下方不透明的div也透明

我是一个前端工程师,我们现在遇到了非常棘手的问题,关于CSS3 RGBA 标签
问题:

我使用的是**谷歌浏览器**当在一个播放的视频流上覆盖一层不透明的DIV或图片(此处为黑色最好),再在DIV或图片上覆盖以RGBA值来写的DIV,则下方不透明的层也会变得透明,从而映射出底层所播放的视频流。但如果换做Opacity,则不存在该问题。

        你们需要一个明亮的视频流才可观看到此现象,请不要忽视。

        举例:将一个RGBA值的DIV<div style = "background-color:rgba(235,235,235,0.4)"></div>

                                                      与一个

                                                     <div style = "background-color:rgb(235,235,235);opacity:0.4;"></div>

                  一左一右放在一个视频背景流上的不透明的div之上,则RGBA值的DIV会看到播放的视频流。
                                        <video autoplay src=".....">//任意找一个亮一点儿的视频webm格式最好
                                        <div style = "width:1280px;height:20px;position:absolute;left:0;background-color:#000;">//不透明的div
                                        <div style="width:640px;height:720px;background-color:rgba(255,255,255,0.4);position:absolute;left:0;"></div>//rgba透明的div

//opacity透明的div
现象:仔细盯着屏幕看,你会发现rgba透明的div中可以看到视频流.........
如果你还想看的更仔细可以在这两个透明的div上再加一个
此时你会发现两边都可以看到最底层的视频流了;**
查看全部
foxaiwushang
二环路老司机
2015/08/13 14:34
  • 浏览器
  • webkit
  • css3
  • 视频流
  • 点赞
  • 收藏
  • 回答
    私信

2个回复