快捷导航
蚂蚁部落 网站首页 前端教程 CSS教程 查看内容

栏目导航

≡基础教程≡

≡样式≡

≡盒模型≡

≡定位≡

≡简单选择器≡

≡结构性伪类选择器≡

≡动态伪类选择器≡

≡UI元素伪类选择器≡

≡打印伪类选择器≡

≡伪元素选择器≡

≡属性选择器≡

≡进阶知识≡

CSS 透明度详解

2017-9-30 09:21| 发布者: admin| 查看: 161| 评论: 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 颜色表示法一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-19 02:27 , Processed in 0.065181 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部