css背设置透明度设置教程

老白 3个月前 186浏览 0评论

网站前端页面开发时,常常需要设置css背景的透明度,以呈现较好的视觉效果,给用户带来良好的体验,那么css是如何设置透明度的?本章给大家分享一下css设置透明度的几种常用方法。希望对有需要的朋友有一定的帮助。

工具/原料

  • 电脑
  • css样式表

方法/步骤

  1. 1

    通过设置颜色透明度实现

    css中rgba()可以用来设置页面元素的颜色和透明度,rgba()颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道,通过它即可实现设置元素的不透明度。

  2. 2

    rgba()具体使用方法:

    background:rgba(255,0,0,0.5);

    rgba(R,G,B,A)里的各值的取值范围:

     


    R:红色值。正整数 (0~255)

    G:绿色值。正整数 (0~255)

    B:蓝色值。正整数(0~255)

    A:透明度。取值0~1之间

  3. 3

    rgba()具体使用效果:

    通过下面的代码我们可以看到rgba()这个函数实现了div的背景透明,但对div内部的文字不影响。

  4. 4

    通过css中的opacity属性设置背景透明度

    在 CSS3 中,增加了一个 opacity 属性,使用此属性可以设置元素的透明度。opacity属性具有继承性,会使容器中的所有元素都具有透明度;

  5. 5

    opacity属性的使用方法



    opacity: value ;



    value :指定不透明度,从0.0(完全透明)到1.0(完全不透明)。

    在容器中可以直接使用此属性。

  6. 6

    opacity属性具体使用效果:

    可以看出文字也透明度也发生了变化,所以opacity不但会改变容器的透明度,容器的子容器里的元素透明度也发生了改变。

    END

注意事项

  • 使用opacity属性会把被设置的元素及其子元素同时设置为同一个透明度,这样的透明规则相当不灵活。
  • 在 IE9 中,直接使用 RGBa 颜色与使用 opacity 设置透明的效果会有差异。


发表评论