大家在敲代码的时候总会遇见一个问题。就是透明度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. 【java基础】面向对象的三大基本特征之-------继承

    面向对象的三大特征:封装,继承,多态 java通过extends关键字来实现继承,而且是单继承,一个子类只可以有一个直接父类,但是父类还可以有父类... java.long.Object是所有类的父类 ...

  2. bash命令行返回值和展开

    bash命令行返回值和展开 标签(空格分隔): bash,命令,状态,展开 1.命令状态结果和执行结果 (1)命令执行的状态返回值,命令执行完成之后,其执行状态结果值保存于bash的特殊状态变量$?中 ...

  3. mysql 查询数据库表结构

    1. mysql> describe tmp_log; +----------+------------------+------+-----+---------+--------------- ...

  4. jquery工具类函数

    1,获取浏览器的名称与版本信息 在jquery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为chrome浏览器,$.broese ...

  5. MT5：放大市场价格指标

    指标把当前交易品种价格简单的放大显示在图表上.   //+------------------------------------------------------------------+//|  ...

  6. 查看APK中MD5签名的方法

    (需下载jdk) 1. 先将apk文件重命名为zip文件 2. 解压zip,其中的META-INF/CERT.RSA文件即MD5签名文件 3. cmd下打开黑窗口,敲入如下命令: keytool -p ...

  7. 在为ListView设置adapter时出错

    为listView设置adapter,代码如下: SimpleAdapter simpleAdapter = new SimpleAdapter(this, listItems, R.layout.m ...

  8. span 元素无法设置宽度问题

    span 元素为行内元素,没有width属性,需要转换为块级元素才可以设置width: 拓展:html元素分为块级元素,行内元素.可变元素. 行内元素与块级元素直观上的区别 1 .行内元素会在一条直线 ...

  9. Ubuntu 16.04 安装 .NET Core[转]

    upir@upir-Rev-1-0:~$ sudo sh -c 'echo "deb [arch=amd64] https://apt-mo.trafficmanager.net/repos ...

  10. Javascript模块化规范

    Javascript模块化规范 一.前端js模块化由来与演变 CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践.09年下 ...