简单总结下opacity、transparent以及rgba
这几个概念最开始学的时候只是有个大致印象,现在复习这部分的知识点,发现不仔细区分一下,还真有点混乱。
三者共同点是都和透明有关。先分着来说一下:
1、opacity用来设置元素的不透明级别,从 0.0 (完全透明)到 1.0(完全不透明)。
2、transparent是颜色的一种,这种颜色叫透明色。
3、rgba(r,g,b,a)稍复杂一点,
r:红色值;g:绿色值;b:蓝色值。三个颜色值组合在一起就形成最终颜色。
a:alpha透明度。表示像素不透明性的值。像素越不透明,则隐藏越多呈现图像的背景。取值0~1之间。0表示完全透明的像素,1表示完全不透明的像素。
现在,我们来看区别:
1、opacity是作为一个完整属性出现的。transparent和rgba都是作为属性值出现的。
2、opacity是对于整个元素起作用的。打个比方,就像拿一块玻璃糊在了这个元素上,盖上的地方都会受到影响。而transparent和alpha是对元素的某个属性起作用的。任何需要设置颜色的地方都可以根据情况使用transparent或rgba。比如背景、边框、字体等等。哪个属性的颜色设置了transparent,哪个属性就是透明的,完全透明。哪个属性用rgba()设置了透明,就对哪个属性起作用,透明程度可设置。
3、由于opacity和alpha设置的透明程度可调,就引出一个继承的问题。如果一个元素未设置opacity属性,那么它会从它的父元素继承opacity属性的值。而alpha不存在继承。举个例子说明一下:
代码一
<p style="background-color: red; opacity: 1;">
1)这是一个p标签,颜色red,opacity值为1
</p>
<span style="background-color: green; opacity: 1; ">2)这是一个span标签,颜色green,opacity值为1</span>
<p style="background-color: red; opacity: 0.6;">
3)这是一个p标签,颜色red,opacity值为0.6
<span style="background-color: green; ">这是一个span标签,颜色green,opacity未设置</span>
</p>
显示结果为:
1)这是一个p标签,颜色red,opacity值为1
2)这是一个span标签,颜色green,opacity值为1
3)这是一个p标签,颜色red,opacity值为0.6 这是一个span标签,颜色green,opacity未设置
代码二
<p style="background-color: rgba(255,0,0,1);">
1)这是一个p标签,颜色red,透明度为1
</p>
<span style="background-color: green;">2)这是一个span标签,颜色green,透明度为1</span>
<p style="background-color: rgba(255,0,0,0.5);">
3)这是一个p标签,颜色red,透明度为0.5
<span style="background-color: green;">(这是一个span标签,颜色green,透明度未设置)</span>
</p>
显示结果为:
1)这是一个p标签,颜色red,透明度为1
2)这是一个span标签,颜色green,透明度为1
3)这是一个p标签,颜色red,透明度为0.5 (这是一个span标签,颜色green,透明度未设置)
(完)
本作品采用知识共享署名 4.0 国际许可协议进行许可。
简单总结下opacity、transparent以及rgba的更多相关文章
- 简单聊下Unicode和UTF-8
今晚听同事分享提到这个,简单总结下. ## Unicode字符集 Unicode的出现是因为ASCII等其他编码码不够用了,比如ASCII是英语为母语的人发明的,只要一个字节8位就能够表示26个英文字 ...
- 简单聊下IO复用
没图,不分析API Java中IO API的发展:Socket -> SocketChannel -> AsynchronousSocketChannelServerSocket -> ...
- JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
- 简单分析下用yii2的yii\helpers\Html类和yii.js实现的post请求
yii2提供了很多帮助类,比如Html.Url.Json等,可以很方便的实现一些功能,下面简单说下这个Html.用yii2写view时时经常会用到它,今天在改写一个页面时又用到了它.它比较好用的地方就 ...
- Example017简单的下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简单说下 Winform 的分页快速开发框架必须要实现的几个功能之一
简单说下 Winform 的分页快速开发框架必须要实现的几个功能之一 分页非为前端分页 和 后端分页,前端分页只有适用于B/S,B/S的呈现速度远远不如C/S,而C/S则没有这个问题,所以分页必然是 ...
- 解决IE8下opacity属性失效问题,无法隐藏元素
解决IE8下opacity属性失效问题 由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...
- 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据
在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据
在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
随机推荐
- cf1140E 回文串+染色方案dp
有点硬核的dp..要用到一个结论.. /* 把原串拆成奇偶串,再拆成极大连续的-1串:该串两端都是非-1数,中间都是-1,并且下标要么都是偶数,要么都是技术 然后对所有这些串进行dp,dp[i][0] ...
- shell脚本批量创建用户
#!/bin/bash DATE=$(date +%F_%T) USER_FILE=user.txt echo_color() { == "green" ];then echo - ...
- spring cloud 声明式rest客户端feign调用远程http服务
在Spring Cloud Netflix栈中,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端.Feign就是Spring Cloud提供的一种声明式R ...
- 眼底血管分割训练函数(SVM,Adaboost)
# -*- coding: utf-8 -*- import numpy as np from sklearn import svm from sklearn.model_selection impo ...
- 俺也会刷机啦--windows7下刷android
刷机很多人都会,本文只为像我这种入门的朋友而写的. 风险提示: 1. SD卡数据极可能会丢失(我这次就全丢了). 2. 升级失败. (俺的)环境说明: windows7 专业版64位 cmd命令行工具 ...
- 使用asp.net MVC的 HtmlHelper 时遇到的小问题,报错:Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions.
异常信息:Templates can be used only with field access, property access, single-dimension array index, or ...
- IDEA文件对比
- 金蝶开k3wise客户端访问中间层不时提示远程服务器不存在或不可用
此问题一般是发生在WIN7客户端+中间层为WIN2008 R2系统,一般是中间层启用guest引起: a. 从Windows Vista以后, Negotiate (http://msdn.micro ...
- 混合编译.c/.cpp与.cu文件
混合编译.c/.cpp与.cu文件 项目中用到cuda编程,写了kernel函数,需要nvcc编译器来编译..c/.cpp的文件,假定用gcc编译. 如何混合编译它们,整体思路是:.cu文件编译出的东 ...
- python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架
一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...