网站出售中,有意者加微信:javadudu

css 背景透明

      今天在开发一个漂浮在背景图上方的模态动画,之前只记得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>

原创文章,作者:匿名用户,如若转载,请注明出处:https://www.pipipi.net/15142.html

(1)
上一篇 2021年12月12日 下午11:26
下一篇 2021年12月14日 下午11:17

相关推荐

发表评论

登录后才能评论