本篇内容是关于“网站制作中通过css设置透明色背景”的两种方法！一般我们通过样式来设置网站的透明背景方法有这两种。1、直接使用“backgroud:rgba(R,G, B, A)”设置透明色背景。2、先使用“backgroud:颜色值;”样式来设置背景色；然后使用“opacity:透明度值”来给背景色添加一个透明度即可。那我们现在就来详细讲解下在html中设置背景颜色透明的方法。
第一种是通过rgba方式设置 RGBA颜色，就是RGB三原色加ALPHA。在给背景添加颜色的同时，提供透明度特性。
用法：background:rgba(R,G, B, A); 红色（R）：代表颜色中的红色成分，0 到 255 间的整数（也可以使用百分比 0% ~ 100%）。
绿色（G）：代表颜色中的绿色成分，0 到 255 间的整数（也可以使用百分比 0% ~ 100%）。
蓝色（B）：代表颜色中的蓝色成分，0 到 255 间的整数（也可以使用百分比 0% ~ 100%）。
透明度（A）：代表透明度，取值 0（完全透明）~1（完全不透明） 之间。
下面我们就来看通过rgba方式设置背景颜色透明度的具体实例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 200px; height: 200px; line-height: 30px; text-align: center; margin: 0 auto; } .div1{ background: rgba(220, 38, 38, 1); } .div2 { background: rgba(220, 38, 38, 0.5); } </style> </head> <body> <div class="div1">背景没有设置透明度</div><br /> <div class="div2">背景设置了透明度</div> </body></html>第二种是通过backgroud和opacity设置。 通过backgroud和opacity设置背景颜色透明background属性中属性值比较简单，大家可以参考css手册，我们在这里来简单看看opacity属性。
opacity属性参数的＂不透明度＂是以数字表示，从 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，换句话说，数字越大代表元素越不透明。参数除了可以使用＂不透明度＂之外，还有 inherit 继承父层属性，不过浏览器支援度较差，不建议使用。下面我们就来看通过backgroud和opacity设置背景颜色透明度的具体实例。
实例代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style type="text/css"> div { width: 200px; height: 200px; line-height: 30px; text-align: center; margin: 0 auto; border: 1px solid #ccc; } .div1 { background: red; } .div2 { background: red; opacity: 0.5; } </style> </head> <body> <div class="div1">背景没有设置透明度</div><br /> <div class="div2">背景设置了透明度</div> </body></html> “网站制作中通过css设置透明色背景的两种方法就介绍到这里。如果想了解更多行业相关的知识可以关注
诚企网络-city86.com，小编将为大家输出更多高质量的实用文章！
本文地址：http://www.city86.com/news_view_534/
