rgba中的a是什么意思 CSS之RGBA颜色指南

今天看到一个网页使用了rgba不知道这个a是什么意思,原来是因为了忘了下面的颜色比上面的浅一些特别用rgba确实很方便,页面也不突兀,特分享一下需要的朋友可以参考下

RGBA是一种可以设置颜色值和透明度的CSS颜色

下面是用rgba() 设置50%透明度的白色.

p {

color: rgba(255, 255, 255, 0.5);

}

RGBA是RGB色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母,Alpha值代表颜色的透明度/不透明度。

RGBA语法

RGBA色彩表示法的格式为:

rgba(red, green, blue, alpha)

前三个值(红绿蓝)的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。

如果你想设置纯红色,那么把red参数设置满,即255,绿,蓝设置0即可。

background-color: rgba(255, 0, 0, 1);

结果:

也可使用百分比:

background-color: rgba(100%, 0%, 0%, 1);

结果:

第四个值, alpha, 制定了色彩的透明度/不透明度,它的范围为0.0到1.0之间

下面的例子是设置50%透明度的黄色:

color: rgba(255, 242, 0, 0.5);

css半透明兼容火狐、ie,chrome,现在浏览器版本都比较高。大家可以放心使用到项目中。

本文来自脚本之家,原文链接:https://www.jb51.net/web/715376.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/901210.html

(0)
上一篇 2025年1月4日 02:16:28
下一篇 2025年1月4日 02:17:15

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 的卢深视:基于结构光RGBD相机的3D全栈技术剖析

    近日,由智东西公开课策划推出的光电3D传感合辑第7讲开讲,的卢深视副总裁崔哲博士进行了题为《基于结构光RGBD相机的3D全栈技术剖析》的分享,从3D结构光系统的核心构成、相机的选型标准以及三维重建、三维识别技术和规模化应用落地的关键等方面展…

    2025年1月5日
    100
  • CSS 水平居中并限定最大的宽度实现

    这篇文章主要介绍了CSS 水平居中并限定最大的宽度实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 一个 CSS 布局和样式的问题,如何在水平居中和限制最大宽度中,进…

    服务器 2025年1月4日
    100
  • 详解CSS清除图片下几像素空白间隙的方法

    这篇文章主要介绍了CSS清除图片下几像素空白间隙的方法 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 最近有伙伴问小编的问题: 页面排版的时候发现图片下面有那么1-2像素的间隙空白,怎么去除。 …

    服务器 2025年1月4日
    100
  • CSS中三角形的绘制与巧妙应用实例详解

    这篇文章主要介绍了CSS中三角形的绘制与巧妙应用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 引 网页中常见的一些三角形,无需制作成图片或者字体图标,使用CSS就可以直接画出来。如小…

    2025年1月4日 服务器
    100
  • 详解CSS-opacity子元素继承父元素透明度的解决方法

    这篇文章主要介绍了详解CSS-opacity子元素继承父元素透明度的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 在写项目页面的过程中,遇到子元素继承父元素透…

    服务器 2025年1月4日
    100
  • HTML+CSS+JS实现堆叠轮播效果的示例代码

    这篇文章主要介绍了HTML+CSS+JS实现堆叠轮播效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 效果: 轮播图在向一个方向移动的同时,要对其每一个图片的大小,位置,透明度以及层…

    服务器 2025年1月4日
    100
  • css解决浮动导致父元素高度坍塌的几种方法

    这篇文章主要介绍了css解决浮动导致父元素高度坍塌的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 一、文档流与浮动 1、’什么是文档流? 在html中,文档流…

    2025年1月4日 服务器
    100
  • css下div下同行多元素右对齐

    这篇文章主要介绍了css下div下同行多元素右对齐,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 方法一: float:right 此外,浮动还会使得布局更紧凑(没空隙…

    2025年1月4日
    100
  • css实现元素垂直居中显示的7种方式

    这篇文章主要介绍了css实现元素垂直居中显示的7种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 【一】知道居中元素的宽高 absolute + 负margin 代…

    2025年1月4日 服务器
    100
  • 纯css实现流向性和动态线条效果的代码

    这篇文章主要介绍了纯css实现流向性和动态线条效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或功能具有一定的参考借鉴价值,需要的朋友可以参考下 思路: 一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置animate让盒…

    服务器 2025年1月4日
    100

发表回复

登录后才能评论

联系我们

156-6553-5169

在线咨询: QQ交谈

邮件:253000106@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

联系微信