一、opacity:0~1

值越高,透明度越低,下面为示例

选择器{
opacity:0.5
}

选择器匹配到的节点们,包括节点们的孩子节点,都会实现%50透明,另 0.5 可直接写成 .5

二、rgba(0~255,0~255,0~255,0~1)

rgba(R,G,B,A) 其中R、G、B分别对应着红绿蓝,此处不细说。A则为透明度,规则如一,下面为示例

选择器{
background-color:rgba(0,0,0,0.5);
}

选择器匹配到的节点们,当且仅当匹配到的节点,不包括其孩子节点,透明度为50%,(0,0,0)表黑色,而(255,255,255)表白色。

css实现透明的两种方式及其区别的更多相关文章

  1. CSS设置透明的两种方式

    1..demo{ background-color:transparent; } 2..demo{ background-color:rgba(0,0,0,0.5); //最后一个参数是用来设置透明度 ...

  2. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  3. Redis持久化的两种方式和区别

    该文转载自:http://www.cnblogs.com/swyi/p/6093763.html Redis持久化的两种方式和区别 Redis是一种高级key-value数据库.它跟memcached ...

  4. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  5. css清除浮动的两种方式(clearfix和clear)

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  6. csc_滤镜filter和实现透明的两种方式

    有这样一个需求,给一个地图实现半透明效果. 使用css滤镜属性可以实现:filter. 下面是属性的所以值 filter: none | blur() | brightness() | contras ...

  7. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  8. vue 路由传参 params 与 query两种方式的区别

    初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  router文件下index.js里面,是这么定义路由的: { p ...

  9. UIImage创建图片的两种方式的区别

    在工作中经常会遇到添加图片,用哪种方式添加更好呢?请看详解 方法一: UIImage *image = [UIImage imageNamed:@"haha"]; 这种方法创建的图 ...

随机推荐

  1. webKit 内核浏览器 源码分析

    如需转载,请注明出处! WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 这是一篇自己写于一年前的工作文档,分享 ...

  2. GIT文件的4种状态

  3. [React] Reference a node using createRef() in React 16.3

    In this lesson, we look at where we came from with refs in React. Starting with the deprecated strin ...

  4. 生成静态页java代码

    package com.fang.news.test; import java.io.BufferedReader; import java.io.BufferedWriter; import jav ...

  5. 稀疏编码(Sparse Coding)的前世今生(二)

    为了更进一步的清晰理解大脑皮层对信号编码的工作机制(策略),须要把他们转成数学语言,由于数学语言作为一种严谨的语言,能够利用它推导出期望和要寻找的程式.本节就使用概率推理(bayes views)的方 ...

  6. 《Java虚拟机原理图解》 1.2.3、Class文件里的常量池具体解释(下)

    NO9.类中引用到的field字段在常量池中是如何描写叙述的?(CONSTANT_Fieldref_info, CONSTANT_Name_Type_info) 一般而言.我们在定义类的过程中会定义一 ...

  7. yarn架构——本质上是在做解耦 将资源分配和应用程序状态监控两个功能职责分离为RM和AM

    Hadoop YARN架构解读 原Mapreduce架构 原理架构图如下: 图 1.Hadoop 原 MapReduce 架构 原 MapReduce 程序的流程:首先用户程序 (JobClient) ...

  8. java生成6位随机数的5种方法

    转自:https://blog.csdn.net/u012491783/article/details/76862526/

  9. 4.QList

    #include "mainwindow.h" #include <QApplication> #include <QLabel> #include < ...

  10. python初始面向对象

    阅读目录 楔子 面向过程vs面向对象 初识面向对象 类的相关知识 对象的相关知识 对象之间的交互 类命名空间与对象.实例的命名空间 类的组合用法 初识面向对象小结 面向对象的三大特性 继承 多态 封装 ...