文章导航

CSS 透明度详解

2018-5-24 09:21| 发布者: admin| 查看: 1237| 评论: 0|来自: 蚂蚁部落

本章节通过代码实例介绍一下如何利用CSS设置元素或者文本的透明度。

特别说明:本文不再考虑IE8和IE8以下浏览器。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  width:150px;
  height:100px;
  background-color:blue;
  opacity:0.5
}
</style>
</head>
<body>
<div></div>
</body>
</html>

通过opacity属性可以设置元素或者文本的透明度,值介于0-1之间,0表示完全透明,1表示不透明,上面的代码可以将div设置为半透明状态。再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  width:150px;
  height:100px;
  text-align:center;
  line-height:100px;
  background-color:blue;
  opacity:0.5
}
</style>
</head>
<body>
<div>蚂蚁部落</div>
</body>
</html>

在实际应用中,可能仅需要设置元素的透明度,但是opacity属性也会同时设置元素内部文本的透明度。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  width:150px;
  height:100px;
  text-align:center;
  line-height:100px;
  background-color:rgba(125,255,158,0.5);
}
</style>
</head>
<body>
<div>蚂蚁部落</div>
</body>
</html>

通过RGBA颜色表示法(最后一个小数用来设置透明度,它的值介于0-1之间),可以仅将元素设置为半透明状态,文本不受影响。使用HSLA颜色表示也可以实现同样的效果,更多内容可以参阅CSS 颜色表示法一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部