【CSS 23】颜色 RGBA HSLA 不透明度opacity 线性渐变 径向渐变 透明度渐变 重复渐变

这篇具有很好参考价值的文章主要介绍了【CSS 23】颜色 RGBA HSLA 不透明度opacity 线性渐变 径向渐变 透明度渐变 重复渐变。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

颜色

CSS 支持 140 多种颜色名称,以及十六进制值、RGB 值、RGBA 值、HSL 值、HSLA 值和不透明度

RGBA颜色
RGBA 颜色值是 RGB 颜色值的扩展,带有 alpha 通道 - 该通道规定颜色的不透明度
RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)
alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* 带不透明度的红色 */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* 带不透明度的绿色 */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* 带不透明度的蓝色 */

HSL颜色
HSL 指的是色相、饱和度和亮度(Hue、Saturation 以及 Lightness)
HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)

色相是色轮上的度数(从 0 到 360):

  • 0(360)是红色
  • 120 是绿色
  • 240 是蓝色

饱和度是一个百分比值:100% 是全色
亮度也是一个百分比值:0% 是深色(黑色),而 100% 是白色

#p1 {background-color: hsl(120, 100%, 50%);} /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);} /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);} /* 深绿色 */
#p4 {background-color: hsl(120, 100%, 70%);} /* 淡绿色 */

HSLA 颜色
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它规定了颜色的不透明度

HSLA 颜色值由以下参数规定:hsla(hue, saturation, lightness, alpha),其中 alpha 参数定义不透明度

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* 带不透明度的深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* 带不透明度的淡绿色 */

不透明度
CSS opacity 属性设置整个元素的不透明度(背景颜色和文本都将是不透明/透明的)
opacity 属性值必须是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字
请注意其中的的文本也将是透明/不透明的

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 带不透明度的红色 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 带不透明度的绿色 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 带不透明度的蓝色 */

渐变

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡
CSS 定义了两种渐变类型:

  • 线性渐变(向下/向上/向左/向右/对角线)
  • 径向渐变(由其中心定义)

线性渐变
如需创建线性渐变,您必须定义至少两个色标

色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向(或角度)以及渐变效果

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

/*线性渐变 - 从上到下(默认)*/
#grad {
	background-image: linear-gradient(red, yellow);
}

/*线性渐变 - 从左到右*/
#grad {
	background-image: linear-gradient(to right, red, yellow);
}

/*线性渐变 - 对角线
可以通过指定水平和垂直起始位置来实现对角渐变
下面的例子展示了从左上角开始(到右下角)的线性渐变*/
#grad {
	background-image: linear-gradient(to bottom right, red, yellow);
}

/*使用角度
如果希望对渐变角度做更多的控制,您可以定义一个角度,来取代预定义的方向(向下、向上、向右、向左、向右下等等)
值 0deg 等于向上(to top)。值 90deg 等于向右(to right)。值 180deg 等于向下(to bottom)

这个角度指定水平线和渐变线之间的角度

*/
#grad {
	background-image: linear-gradient(angle, color-stop1, color-stop2);
}

#grad {
	background-image: linear-gradient(-90deg, red, yellow);
}

/*使用多个色标
下面的例子展示了带有多个色标的线性渐变(从上到下)
*/
#grad {
	background-image: linear-gradient(red, yellow, green);
}

#grad {
	background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

/*
重复线性渐变
repeating-linear-gradient() 函数用于重复线性渐变
*/
#grad {
	background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

透明度渐变
CSS 渐变还支持透明度,也可用于创建渐变效果
如需添加透明度,我们使用 rgba() 函数来定义色标
rgba() 函数中的最后一个参数可以是 0 到 1 的值,它定义颜色的透明度:0 表示全透明,1 表示全彩色(无透明)
下面的例子展示了从左开始的线性渐变
开始完全透明,然后过渡为全色红色

#grad {
	background-image: linear-gradient(to right, rgba(255, 0, 0, 0), raba(255, 0, 0, 1));
}

径向渐变

径向渐变由其中心定义
如需创建径向渐变,您还必须定义至少两个色标

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
/*默认地,shape 为椭圆形,size 为最远角,position 为中心*/
/*径向渐变-均匀间隔的色标(默认)*/
#grad {
	background-image: radial-gradient(red, yellow, green);
}

/*径向渐变-不同间距的色标*/
#grad {
	background-image:radial-gradient(red 5%, yellow 15%, green 60%);
}
/*设置形状
shape 参数定义形状
可接受 circle 或 ellipse 值
默认值为 ellipse(椭圆)
*/
#grad {
	background-image: radial-gradient(circle, red, yellow, hotpink);
}
<!DOCTYPE html>
<html>
<head>
<style>
/*使用大小不同的关键字
size 参数定义渐变的大小
可接受四个值:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
*/
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}

</style>
</head>
<body>

<h1>径向渐变 - 不同的size关键字</h1>

<h2>closest-side</h2>
<div id="grad1"></div>

<h2>farthest-side</h2>
<div id="grad2"></div>

<h2>closest-corner</h2>
<div id="grad3"></div>

<h2>farthest-corner(默认)</h2>
<div id="grad4"></div>

</body>
</html>

重复径向渐变
repeating-radial-gradient() 函数用于重复径向渐变文章来源地址https://www.toymoban.com/news/detail-543062.html

到了这里,关于【CSS 23】颜色 RGBA HSLA 不透明度opacity 线性渐变 径向渐变 透明度渐变 重复渐变的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity之透明度混合与ps的透明度混合计算结果不一致(gamma矫正和线性空间)

    前段时间学习shader时发现了一个问题,一张纯红色透明度为128的图片叠加在一张纯绿色的图片上在unity中得出的结果与ps中的结果不一致。网上查找了ps中的透明混合的公式为  color = A.rgb*A.alpha + B.rgb*(1-A.alpha)。自己计算了一下结果总是不对。  红色透明度128的图           

    2024年02月05日
    浏览(49)
  • Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格

    1 traverse (模型循环遍历方法) 2. THREE.TextureLoader(用于加载和处理图片纹理) 3. THREE.MeshLambertMaterial(用于创建材质) 4. getObjectByProperty(通过材质的属性值获取材质信息) 在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上加入onSetSystemModelMap (设置模型材质方法

    2024年02月13日
    浏览(51)
  • 如何更改 CSS 背景图片的不透明度

    介绍 opacity 是一个 CSS 属性,允许你改变元素的不透明度。默认情况下,所有元素的值为 1 。通过将这个值更接近 0 ,元素将会变得越来越透明。 一个常见的用例是将图像作为背景的一部分。调整不透明度可以提高文本的可读性或实现所需的外观。然而,目前没有办法只针对

    2024年04月17日
    浏览(43)
  • iOS 使用Hex色值设置颜色(可设置透明度使用4个字节色值赋值)

    简单来说就是用十六机制来表示三原色,三原色不同强度组合出不同颜色; 详见:Hex色值是什么(含透明度) iOS不如 Kotlin 有API可直接支持HEX赋值,得自己写个扩展方法 普通无透明度代码如下: 带透明度的代码如下(注意此处解析顺序是RGBA,如仿Kotlin可改为ARGB):

    2024年04月27日
    浏览(39)
  • 【css伪类选择器及透明度——附项目图片及代码】

    不知不觉,又鸽了好长时间了,非常抱歉,没办法,毕竟开学了,今天课少,抽出了两个小时写了一篇css的,每天不是被催更,就是在催更的路上。放心,小陈陈有时间一定会给大家分享好玩的作品。 让大家欢声笑语中学到新知识,文章大概写了3个半小时,到目前为止已完

    2023年04月09日
    浏览(43)
  • OpenLayers实战,WebGL图层鼠标经过要素高亮显示,根据变量自动修改WebGL图层要素的透明度、大小和颜色

    专栏目录: OpenLayers实战进阶专栏目录 本章讲解OpenLayers使用WebGL图层情况下,鼠标经过要素高亮显示,根据变量自动修改WebGL图层要素的透明度、大小和颜色的功能。 webgl图层的样式并不像普通矢量图层直接修改或者切换样式就可以的,而是要预先通过webgl的运算符编写特定规

    2024年02月04日
    浏览(72)
  • FreeCAD傻瓜式教程之约束设定、构建实体、开孔、调整颜色、透明度、参考距离、任意修改尺寸、保持开孔居中、外部图形、基准平面等

    本内容基于官方教程中的绘制简单的零件中的体会,在初次绘制的时候,总是无法完成,几经尝试才发现其关键点所在,以此文记录,用以被查资料,同时也希望能够帮到纯白新手快速熟悉该软件的绘图方法。 一、. 打开软件,选择Part Design工作台,然后选择任务,新建实体

    2024年02月11日
    浏览(45)
  • css 背景是个图片并且含有透明度的渐变色.超级简单。background相关属性就行了

    底纹是个背景图片。 然后上面有个渐变色。渐变色含有透明度这样才能把底纹显示出来 不用麻烦的把图片放进去各种定位修改层级来写啦。 直接一个background相关属性就行了。 背景色怎么增加透明度呢 使用rgba的方式rgba(127,47,255, 0.7 )。 //0.7是透明度

    2024年01月16日
    浏览(41)
  • 透明度和透明贴图制作玻璃水杯

    模型透明度是指一个物体或模型在呈现时的透明程度。它决定了物体在渲染时,是否显示其后面的物体或背景。 在图形渲染中,透明度通常以0到1之间的值表示。值为0表示完全透明,即物体不可见,背景或其他物体完全穿透;值为1表示完全不透明,即物体完全可见,没有透

    2024年02月07日
    浏览(51)
  • Android 透明度设置

    目录 一、透明度对照表 二、透明度介绍 三、透明度设置 3.1 xml设置 3.2 代码设置   注:00是完全透明,FF就是完全不透明         我们的UI小姐姐就喜欢给 「不透明度」 ,这个需要自己判断一下。         Android中的颜色值通常遵循RGB/ARGB标准,使用时通常以“#”字符

    2024年02月05日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包