css背景透明度

terry 2年前 (2023-09-07) 阅读数 325 #CSS

今天我开发了一个漂浮在背景图像之上的模态动画。我只是注意到opacity和rgba可以得到透明设置，但并不是所有都有资格得到“透明背景，不透明文本”的效果。现在我们来尝试一下。

CSS中实现透明的方法一般有3种。下面是不透明度50%的书写方法

不透明度

css3：255,255,255,0.5)
IEfilter专属滤镜：Alpha(opacity=x)，x值从0到100，如filter=50，如filter)

本文讨论了以上两种方法。它也适用于 IE，但不会解释。

？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
.trans{
  padding: 25px;
  background-color:#000000;
  opacity: 0.2;
}
.trans p{
    color: red;
}
</style>
</head>
<body>    

<div class="trans">
    <p>测试文字</p>
</div>

</html>

(2)rgba rgba(0,0,0,0.2) 颜色的三色rgb值和透明度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文字</title>
<style>
.trans{
  padding: 25px;
  background-color: rgba(0,0,0,0.2);     /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
.trans p{
  color: red;
}

</style>
</head>
<body>    

<div class="trans">
    <p>测试文字</p>
</div>

</html>

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

下一篇：css动画无限循环

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

css背景透明度

版权声明

作者文章