CSS3 RGBA颜色类型不等于RGB与opacity相加_建站学-个人建站指南,网页制作,网站设计,网站制作教程

这里我们学习CSS3 RGBA颜色类型，使用它不等于RGB与opacity相加。

想想不使用CSS3，我们是如何满足“背景透明，文字（内容）不透明”这种需求的？

　　例如现在有个需求：

有个长300px，高100px的div在body为红色的页面中；
该div拥有不透明度为50%的黑色背景颜色；
该div内容不允许出现半透明效果，且文字为白色。

　　根据该需求中的3点要求，我们需要得出的效果应如下图：

　　 hex-opacity image
　　Figure 1: 背景透明内容不透明

根据需求里的已知条件，我们代码如下：

body{
    background:#f00;
}
#opacity{
    width:400px;
    height:100px;
    background-color:#000;
    color:#fff;
    filter:alpha(opacity=50);     /* For IE */
    opacity:.5;
}

<div id="opacity">怎样实现背景透明，内容不透明？</div>

　　运行这段代码后，效果与需求3不符合，内容也随着容器成了半透明的，看其效果如下图：

　　 hex-opacity-fail image
　　Figure 2: 内容也半透明了

　　有经验的前端工程师知道，要达到需求所述的效果，上面的代码需要做些许变动：

如果仅需满足IE，那么在原有的结构上加多一层，并将其设置为position:relative。效果如下：

2.兼容大部分浏览器的处理方式：这也需要加多一层，不过要与原结构“同级”。效果如下：

　　以上2中方式，其中only ie的自然是不可取的，因为这是前端工程师的职责所在，我们必须使得大部分用户能得到相同的体验，而不仅仅是某个范围。

(责任编辑：admin)

搜索

热门标签:

CSS3 RGBA颜色类型不等于RGB与opacity相加