ITPub博客

首页 > 应用开发 > Html/css > CSS3颜色不透明度如何设置

CSS3颜色不透明度如何设置

原创 Html/css 作者:千锋教育qyf 时间:2021-08-12 17:57:49 0 删除 编辑

  web前端技术包含HTML和CSS样式,两者是相辅相成的,学习CSS样式不必可少,那么在学习CSS样式中,CSS3颜色不透明度如何设置?在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00)、rgb模式颜色、或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度。在CSS3中新增了两种设置颜色不透明度的方法,一种是使用rgba模式设置,另一种是使用opacity属性设置。下面将详细讲解两种设置方法。

CSS

  1. rgba模式

  rgba是CSS3新增的颜色模式,它是rgb颜色模式的延伸。rgba模式是在红、绿、蓝三原色的基础上添加了不透明度参数,其语法格式如下。

  rgba(r,g,b,alpha);

  上述语法格式中,前三个参数与RGB中的参数含义相同,括号里面书写的是rgb的颜色色值或者百分比,alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的数字。

  例如,使用rgba模式为p标签指定透明度为0.5,颜色为红色的背景,代码如下。

  p{background-color:rgba(255,0,0,0.5);}

  或

  p{background-color:rgba(100%,0%,0%,0.5);}

  2. opacity属性

  opacity属性是CSS3的新增属性,该属性能够使任何元素呈现出透明效果,作用范围要比rgba模式大得多。opacity属性的语法格式如下。

  opacity:参数;

  上述语法中,opacity属性用于定义标签的不透明度,参数表示不透明度的值,它是一个介于0~1之间的浮点数值。其中,0表示完全透明,1表示完全不透明,而0.5则表示半透明。


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69996644/viewspace-2786702/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
千锋教育隶属于北京千锋互联科技有限公司,以“初心至善,匠心育人”为核心价值观,致力于打造职业教育全产业链人才服务平台,公司总部位于北京,拥有全国一体化就业保障服务,成为学员信赖的职业教育品牌。 每年有数百万名学员受益于千锋组织的技术研讨会、技术培训课、网络公开课及免费教学视频。

注册时间:2021-03-17

  • 博文量
    527
  • 访问量
    204743