CSS3--5.颜色属性

HTML5中添加了一些新的颜色的表示方式
1.RGBA:说得简单一点就是在RGB的基础上加进了一个通道Alpha。RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。RGBA比元素设置CSS的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度
a)语法:
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数| 百分数
A:透明度。取值0~1之间
b)使用示例:
div{width: 200px;height: 200px;background-color: rgba(10,20,245,0.5);color: white;
}
2. HSLA(H,S,L,A):
a)此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度
b)语法:
H:Hue(色调,色相)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 – 360,过渡为:(红橙黄绿青蓝紫红)
S:Saturation(饱和度)。取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%,50%是平衡值
A:Alpha透明度。取值0~1之间。
c)示例
span{width: 200px;height: 200px;display: block;background-color: hsla(360,100%,50%,0.6);color: white;
}
3.关于透明度的补充说明:
a)opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度
b)transparent 不可调节透明度,始终完全透明
c)使用rgba 来控制颜色,相对opacity ,不具有继承性
<style>*{padding: 0;margin: 0;}div{width: 200px;height: 200px;border: 1px solid #ccc;/*1.使用预设了值*/background-color: red;}</style>
</head>
<body><div>这是内容</div>
</body>

969404-20190313184555286-651963040.png

/*2.使用颜色拾取器*/
background-color: #c9ffa6;

969404-20190313184650047-1177918492.png

/*rgb(红,绿,蓝)*/
background-color: rgb(255,150,0);

969404-20190313184723524-812027844.png

/*hsl(颜色(0~360),饱和度(0%~100%),明度(0%~100%))*/
/*明度默认是50%,一般建议保留50的值*/
background-color: hsl(300,100%,50%);

969404-20190313184748916-1387546277.png

 /*h5中的颜色设置*/
/*rgba(红色,绿色,蓝色,透明度)透明度:0代表完全透明  1代表完成不透明  不会影响子元素*/
background-color: rgba(255,0,255,0.2);

969404-20190313184819544-933654277.png

转载于:https://www.cnblogs.com/Tobenew/p/10525092.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/387258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

逻辑回归的通俗解释 逻辑回归的定位

1 逻辑回归的定位 首先&#xff0c;逻辑回归是一种分类&#xff08;Classification&#xff09;算法。比如说&#xff1a; 给定一封邮件&#xff0c;判断是不是垃圾邮件给出一个交易明细数据&#xff0c;判断这个交易是否是欺诈交易给出一个肿瘤检查的结果数据&#xff0c;判断…

机器学习08机器学习系统设计

首先要做什么 一个垃圾邮件分类器算法为例&#xff1a; 为了解决这样一个问题&#xff0c;首先要做的决定是如何选择并表达特征向量 x。 可以选择一个由 100 个最常出现在垃圾邮件中的词所构成的列表&#xff0c;根据这些词是否有在邮件中 出现&#xff0c;来获得我们的特…

数学笔记1——导数1(导数的基本概念)

什么是导数导数是高数中的重要概念&#xff0c;被应用于多种学科。从物理意义上讲&#xff0c;导数就是求解变化率的问题&#xff1b;从几何意义上讲&#xff0c;导数就是求函数在某一点上的切线的斜率。我们熟知的速度公式&#xff1a;v s/t&#xff0c;这求解的是平均速度&a…

python接口自动化(四)--接口测试工具介绍(详解)

简介 “工欲善其事必先利其器”&#xff0c;通过前边几篇文章的介绍&#xff0c;大家大致对接口有了进一步的认识。那么接下来让我们看看接口测试的工具有哪些。 目前&#xff0c;市场上有很多支持接口测试的工具。利用工具进行接口测试&#xff0c;能够提供测试效率。例如&…

机器学习09支持向量机

支持向量机(Support Vector Machines) 在监督学习中&#xff0c;许多学习算法的性能都非常类似&#xff0c;因此&#xff0c;重要的不是你该选择使用学习算法 A 还是学习算法 B&#xff0c;而更重要的是&#xff0c; 应用这些算法时&#xff0c;所创建的大量数据在应用这些算…

数学笔记2

数学笔记2——导数2(求导法则和高阶导数)和、差、积、商求导法则设uu(x),vv(x)都可导&#xff0c;则&#xff1a;(Cu)’ Cu’, C是常数(u v)’ u’ v’(uv)’ u’ v’(u/v)’ (u’v – uv’) / v21、2不解释&#xff0c;下面给出3、4的推导过程乘法法则的推导过乘法法则…

机器学习10聚类

无监督学习 在非监督学习中&#xff0c;我们需要将一系列无标签的训练数据&#xff0c;输入到一个算法中&#xff0c; 然后让它找这个数据的内在结构。 我们可能需要某种算法帮助我们寻找一种结构。图上的数据看起来可以分成两个分开的点集&#xff08;称为簇&#xff09;&am…

python 的笔记

语言&#xff1a;Python IDE&#xff1a;Python.IDE 需求 做出彩虹效果 颜色空间 RGB模型&#xff1a;光的三原色&#xff0c;共同决定色相 HSB/HSV模型&#xff1a;H色彩&#xff0c;S深浅&#xff0c;B饱和度&#xff0c;H决定色相 需要将HSB模型转换为RGB模型 代码示例&am…

关联分析(Association analysis)

关联分析&#xff08;Association analysis&#xff09; 简介 大量数据中隐藏的关系可以以‘关联规则’和‘频繁项集’的形式表示。rules&#xff1a;&#xff5b;Diapers&#xff5d;–>{Beer}说明两者之间有很强的关系&#xff0c;购买Diapers的消费者通常会购买Beer。 除…

机器学习11主成分分析

降维(Dimensionality Reduction) &#xff1a; 一、 降维目的&#xff1a; 目的一&#xff1a;数据压缩&#xff08;Data Compression&#xff09; 目的二&#xff1a;数据可视化&#xff08;Visualization&#xff09; 二、 主成分分析&#xff08;PCA&#xff09; 主成分…

使用Apriori进行关联分析(一)

使用Apriori进行关联分析&#xff08;一&#xff09;大型超市有海量交易数据&#xff0c;我们可以通过聚类算法寻找购买相似物品的人群&#xff0c;从而为特定人群提供更具个性化的服务。但是对于超市来讲&#xff0c;更有价值的是如何找出商品的隐藏关联&#xff0c;从而打包促…

主成分分析法 (PCA) 用于数据可视化实验 -- Matlab版

第一步&#xff1a;下载数据集。 https://www.csie.ntu.edu.tw/~cjlin/libsvmtools/datasets/multiclass.html#pendigits 第二步&#xff1a;改变数据格式。 注&#xff1a;此数据集的各特征值均为像素&#xff0c;即属于同一量纲&#xff0c;故无需归一化步骤。 原格式为&a…

后端视角下的前端框架之Vue.js初探

背景 作为常年搞后端的自己来说&#xff0c;除了多年前学习的一点关于HTML的皮毛&#xff0c;对现在的前端技术栈可谓是一窍不通。但是因为最近在做的内部业务全链路监控系统&#xff0c;负责前端的同事做到一半去搞别的项目了&#xff0c;为了把项目落地不得不硬着头皮学一下前…

机器学习12推荐系统

推荐系统(Recommender Systems) 推荐系统根据浏览用户过去买过什么书&#xff0c;或过去评价过什么电影来判断并推荐新产品给用户。 这些系统会为像亚马逊和网飞这样的公司带来很大一部分收入。 因此&#xff0c;对推荐系统性能的改善&#xff0c;将对这些企业的有实质性和…

使用Apriori进行关联分析(二)

使用Apriori进行关联分析&#xff08;二&#xff09;书接上文&#xff08;使用Apriori进行关联分析&#xff08;一&#xff09;&#xff09;&#xff0c;介绍如何挖掘关联规则。发现关联规则我们的目标是通过频繁项集挖掘到隐藏的关联规则。所谓关联规则&#xff0c;指通过某个…

Apache Tomcat 7 Configuration BIO NIO AIO APR ThreadPool

Apache Tomcat 7 Configuration Reference (7.0.93) - The Executor (thread pool)https://tomcat.apache.org/tomcat-7.0-doc/config/executor.html Tomat组件研究之ThreadPool - 老码农的专栏 - CSDN博客https://blog.csdn.net/chen77716/article/details/344764 Tomcat中的线…

数学笔记3——导数3(隐函数的导数)

数学笔记3——导数3&#xff08;隐函数的导数&#xff09;幂函数的扩展形式f(x) xn的导数&#xff1a;f’(x) nxn-1&#xff0c;n是整数&#xff0c;该公式对f(x) xm/n, m,n 是整数同样适用。推导过程&#xff1a;什么是隐函数引自知乎&#xff1a;“如果方程F(x,y)0能确定y…

机器学习13大规模数据集

大型数据集的学习&#xff08;Learning With Large Datasets&#xff09; 如果我们有一个低方差的模型&#xff0c; 增加数据集的规模可以帮助你获得更好的结果。 我们应该怎样应对一个有 100 万条记录的训练集&#xff1f; 以线性回归模型为例&#xff0c;每一次梯度下降…

svn认证失败,解决方案

在svnserve.conf:文件中去掉authz-db authz前面的#号&#xff0c;会出现的认证失败。 造成此原因的主要问题就是authz文件中权限没有配置好。 例如&#xff1a; 创建prj1库 svnadmin create prj1 修改配置文件 svnserve.conf: [general] anon-access read auth-access write…

Python机器学习库sklearn的安装

Python机器学习库sklearn的安装 scikit-learn是Python的一个开源机器学习模块&#xff0c;它建立在NumPy&#xff0c;SciPy和matplotlib模块之上能够为用户提供各种机器学习算法接口&#xff0c;可以让用户简单、高效地进行数据挖掘和数据分析。 Ubuntu14.04系统上安装 安装num…