码迷,mamicode.com
首页 > Web开发 > 详细

css背景透明

时间:2019-07-14 09:19:24      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:doc   title   其他   col   char   div   html   round   sha   

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等的不透明度

 

css背景透明

标签:doc   title   其他   col   char   div   html   round   sha   

原文地址:https://www.cnblogs.com/Programmer-bao/p/11183055.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!