• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

css背设置透明度设置教程_CSS学习

当前位置：网站建设 > 技术支持

网站前端页面开发时，常常需要设置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 设置透明的效果会有差异。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。