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

HEternally

今天在写一个页面的时候遇到透明背景的问题，这个问题以前做页面的时候也遇到过，但是当时没有去总结，这次又遇到发现记得不是很清楚，所有就写了一篇这个文章记下来，给自己提个醒。

平时我们所说的调整透明度，其实就是在样式中调整不透明度，而实现透明的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等的不透明度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
    background-color:#eef ;
}
.demo{
  padding: 25px;
  background-color:#000000;
  background-color:rgba(0,0,0,0.2); 
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    

<div class="demo">
    <p>背景透明，文字不透明</p>
</div>

</html>

在background-color中使用了rgba，在标准浏览器中，背景会透明，而文字不透明，效果如下：

所以使用rgba实现背景透明，文字不透明是可取的。

IE专属滤镜filter:Alpha(opacity=x)

这时IE浏览器专属，因为IE低版本电脑没有，也就没有实验，就在网上找了点资料：

仅支持IE6、7、8，在IE10版本中被废除。
在IE6、7中，需要激活IE的haslayout属性（如：*zoom：1或者*overflow：hidden），让它能够读懂filter:Alpha。
在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position:static，其子元素设置为相对定位，可让子元素不继承Alpha值，保证字体颜色不透明。

<!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: #000000;
  filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
  position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
  *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
}
.demo p{
    color: #FFFFFF;
    position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值，保证字体颜色不透明 */
}      

</style>
</head>
<body>    

<div class="demo">
    <p>背景透明，文字不透明</p>
</div>

综上所述

综合以上三点可以得出，想要设置透明背景，文字不透明，可以采用rgba和IE的专属滤镜filter:Alpha，这样就可以在所以浏览器都实现这个效果。

我们还可以使用@media判断浏览器是否为IE6、7、8，当浏览器为这三个版本的时候就使用IE专属的滤镜，其他情况就使用rgba，判断方法如下：

@media \0screen\,screen\9 {...}

这些都只是我的一点想法，有的资料也是网上找的，写在这里方便大家；如果您们有好的方法，欢迎大家评论，一起交流。

发布于 2017-06-23 22:31

CSS

CSS 布局