CSS中设置透明度

最新推荐文章于 2024-04-26 19:17:54 发布

clqxmt

最新推荐文章于 2024-04-26 19:17:54 发布

阅读量456

点赞数

分类专栏： CSS 文章标签： CSS中设置透明度

本文链接：https://blog.csdn.net/weixin_43755513/article/details/97480805

版权

CSS 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

CSS中设置透明度

1.使用rgba
r:红色值。值可以是正整数或百分数
g:绿色值。值可以是正整数或百分数
b:蓝色值。值可以是正整数或百分数
a:Alpha透明度。取值0-1之间

background:rgba(r,g,b,a);

rgba使背景透明，背景上面的字体不会透明。

rgba在CSS3中才出现，低版本浏览器不支持，

2.opacity
值是0-1 例如：opacity：0.5； IE不兼容
opacity不仅会使背景透明，背景上面的文字也会显示透明。

3.Filter
语法格式：filter:alpha(opacity=值); 这里的值是0-100；
例如：filter:alpha(opacity=30); 兼容IE。
filter不仅会使背景透明，背景上的内容也会透明。

写代码的时候可以把opacity和filter都写上，使每个浏览器都兼容。

<!doctype html>
<html>
  <head>
      <title></title>
      <meat charset="utf-8">
      <style>
			.div1{width:200px;height:200px;rgba(0,0,255,0.5);background:#f00;}
			.div2{width:200px;height:200px;opacity:0.5;background:#f00;}
			.div3{width:200px;height:200px;filter:alpha(opacity=50); background:#f00;}
		</style>
  </head>
  <body>
    <div class="div1">
			<p>rgba透明</p>
		</div>
		<div class="div2">
			<p>opacity透明  IE不兼容</p>
		</div>
		<div class="div3">
			<p>filter透明  IE兼容</p>
		</div>
  </body>
</html>

clqxmt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中设置透明度

CSS中设置透明度1.使用rgbar:红色值。值可以是正整数或百分数g:绿色值。值可以是正整数或百分数b:蓝色值。值可以是正整数或百分数a:Alpha透明度。取值0-1之间rgba使背景透明，背景上面的字体不会透明。rgba在CSS3中才出现，低版本浏览器不支持，2.opacity值是0-1 例如：opacity：0.5； IE不兼容opacity不仅会使背景透明...
复制链接

扫一扫