大家在敲代码的时候总会遇见一个问题。就是透明度opacity 会导致整个元素内全部都会改变，通常的方法是在同级元素后面再加上一个元素标签，但是现在有CSS3 ，我们完全不用这么做了。看代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>透明度的常见问题</title>
<style>
div{
width: 200px;
height: 100px;
text-align: center;
color: black;
/*background-color: red;*/
/*opacity: 0.3;*/
background-color: rgba(255,0,0,0.3);
}
</style>
</head>
<body>
<div><a>神奇的CSS3</a></div>
</body>
</html>

同时大家不必担心兼容问题，除了IE8以及以前的版本，其他都能很好的支持

CSS3的透明度使用的更多相关文章

  1. 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. css3颜色+透明度渐变

    .linear { width: 630px; height: 120px; line-height: 150px; text-align: center; font-size: 26px; posi ...

  3. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  4. CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

    转载,原文见:http://blog.csdn.net/freshlover/article/details/17143341 CSS3的透明度属性opacity想必大家都已经用的无处不在了.而对于不 ...

  5. 初学html的单词笔记

    font-size: 文字大小color: 顏色solid: 边框线text-align: 間距center: 文字放在中間<head> 网页头部<title> 网页标题< ...

  6. CSS3 Filter详解（改变模糊度 亮度 透明度等方法）

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

  7. CSS3的颜色透明度 ajax请求时loading

    1.background-color:rgba(0,0,0,0.65)         这行代码让覆盖层变黑色,且有0.6的透明度 正常情况下遮盖层会把透明度遗传给弹出框(它的子元素),但是利用CSS ...

  8. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

  9. CSS3:透明度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Deep Learning 23：dropout理解_之读论文“Improving neural networks by preventing co-adaptation of feature detectors”

    理论知识:Deep learning:四十一(Dropout简单理解).深度学习(二十二)Dropout浅层理解与实现.“Improving neural networks by preventing ...

  2. ES6 标准部分应用

    1.多行字符串 字符串换行时,不再使用\n,而是使用倒引号`..`,例如: alert(`这是一个 多行 字符串`); 2.模版字符串 不再使用"+"来拼接字符串与变量,而是使用倒 ...

  3. javascript 提取表单元素生成用于提交的对象（序列化 html 表单）

    function serialize(f) { var o = {}; var s = f.getElementsByTagName("select"); for (var i = ...

  4. JS添加父节点的方法。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 编辑美化图片，保存至本地，Adobe出品（支持IOS，android，web调用）免费插件

    本例以web调用做为例子,本插件支持主流浏览器,IE要9以上,移动设备,触屏设备也支持,能自适应屏幕大小. 使用效果: 工具还是很丰富的,编辑完成之后,可以保存图片至本地目录. 使用说明: 1,需要在 ...

  6. bootstrap中如何让响应式图片（img-responsive）水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  7. 前端面试题2016--HTML

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可 ...

  8. Objective－C（ Foundation框架 一 NSFileManager）

    NSFileManager 用来管理文件系统的 它可以用于常见的文件,文件夹操作(拷贝,剪切,创建) NSFileManager使用了单例模式(Singleton) 使用defaultManager可 ...

  9. （转）spring boot注解 --@EnableAsync 异步调用

    原文:http://www.cnblogs.com/azhqiang/p/5609615.html EnableAsync注解的意思是可以异步执行,就是开启多线程的意思.可以标注在方法.类上. @Co ...

  10. MVC是什么？

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...