6

css实现背景透明，文字不透明效果

 2 years ago
source link: https://www.geekjc.com/post/5edefc7d267f5639273ac0b8
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
关注本站公众号获取最新福利

css实现背景透明，文字不透明效果

时间: 06/09/2020作者: frontend-联合编辑浏览量: 839

今天在开发一个漂浮在背景图上方的模态动画，之前只记得opacity和rgba可以实现透明度设置，但是在实现“背景透明，文字不透明”的效果中却不是都可行的，下面我们就来实际测试一下。

css实现透明效果的方法一般有以下3种方式，以下是不透明度都为50%的写法

  • css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.5
  • css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.5)

  • IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=50)

    本文讨论上面两种方法，IE下的情况也可使用但不做讲解。

（1）opacity <无法实现背景透明，文字不透明效果>

设置opacity元素的所有后代都会一起具有透明性

<!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>
关注下面的标签，发现更多相似的文章

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK