css背景透明

来源:博客园 分类: 文章浏览史 发布时间:2020-05-16 15:11:55 最后更新:2020-05-16 浏览:570
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-05-16 15:11:55

css实现背景透明而文字不透明

 

 

平时我们所说的调整透明度,其实就是在样式中调整不透明度,而实现透明的css方法通常有如下3中方式:

 

css3的opacity:x。x的取值为0到1,如opacity:0.5表示不透明度为50%;

css3的rgba(red,green,blue,alpha),alpha的取值为0到1,如rgba(255,255,255,0.5)表示不透明度为50%;

IE专属滤镜filter:Alpha(opacity=x),x的取值为0到100,如filter:Alpha(opacity=50)表示不透明度为50%

 

css3的opacity

兼容性:IE6、7、8都不支持,IE9及以上和其他标准的浏览器都支持

 

 

但是使用opacity设置元素的不透明度会使其所有后代元素都会随着一起具有透明度,一般都用于调整图片或者模块的整体不透明度

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>opacity</title>

<style>

*{

    padding: 0;

    margin: 0;

}

body{

    padding: 50px;

    background-color:#eef ;

}

.demo{

  padding: 25px;

  background-color:#000000;

  opacity: 0.2;

}

.demo p{

    color: #FFFFFF;

}

</style>

</head>

<body>    

 

<div class="demo">

    <p>背景透明,文字也透明</p>

</div>

 

</html>

使用后整个模块都会变透明,效果如下:

 

 

所以只使用opacity想是想背景透明,文字不透明是不行的。

css3的rgba

 

兼容性:IE6、7、8都不支持,IE9及以上版本和标准的浏览器都支持

 

 

rgba设置颜色的不透明度,一般都用于调整background-color、color、box-shadow等的不透明度

 

php技术微信