css设置背景透明度、16进制色值设置透明度

已于 2022-09-07 10:13:03 修改
阅读量1.3w 收藏 11
点赞数 7
分类专栏： css样式 文章标签： css css3
于 2022-05-01 02:28:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WX_nbclass/article/details/124522118
版权

1、rgba（推荐）

（rgba与rgb区别：rgb和rgba都表示颜色。
        rgb： 代表 红 绿 蓝 三种颜色
        rgba： 在rbg的基础上加了 “alpha” 透明度，取值在0-1之间。）

background: rgba(0,0,0,0.4);

2、rgb( 0 0 0 /x%)  这是之前写样式用的格式，也可以渲染成功 

background: rgb(0 0 0 /40%);

 3、十六进制色值，在16进制色值后直接加两位数字，作为透明度

同样取值在0~255，那么如果想设置透明度为0.5，就要加255的一半，大约用128，搜一个进制转换工具，转换出来16进制数是80

在我们想要加透明度的色值后面直接加上80即可

 

 4、opacity， 取值在0-1之间，值越小越透明

但子元素会继承父元素的透明度，即使在设置子元素opacity，也是在父元素opacity基础上设置，使用场景非常有限

用户11
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 透明色 RGBA使用介绍
09-25
我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧
css透明度的写法 16进制透明度的转化
康一夏忙中偷闲的日子
05-12 2875
白色，50%透明的两种写法 // 白色，50%透明 color: #ffffff80; // 白色，50%透明 color: rgba(255, 255, 255, .5);
网页特效 | 纯CSS控制DIV背景透明效果
11-23
纯CSS控制DIV背景透明效果，没有什么好解释的，代码全在文件里面，直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b，前两位为16进制透明度， 比如说值是上面用到的0.2，那么就是0.2×255＝51，再转换成16进制为33 至于10进制转换16进制，请查阅js函数toString(16) 小韩网页设计为您提供的免费网页特效
CSS设置背景透明属性
2301_77574331的博客
03-11 457
值得注意的是：如果一个元素改变透明度，该元素和其包含的子元素都会具有和该元素相同的透明度。2.通过rgba(red, green, blue, alpha)函数改变透明度。3.通过background: transparent设置背景透明。值得注意的是，这样设置的背景是无颜色的纯透明的。1.通过opacity属性改变透明度。下面通过4个例子做对比。
html的个人学习笔记 html-css.html
10-09
个人在学习中的笔记<!--标签介绍： <meta />字符集 charset=""(GBK/UTF-8) <title>网页名称</title> <base target=""/>统一指定网页中所有的a标签网页打开方式 _self当前页面转变，_blank在新页面打开 --> <!-- 1.规定文字样式的属性（快捷键fsn + tab） 格式:font-style:ilalic; 取值:normal:正常的 italic:倾斜的 2.规定文字粗细的属性(fwb + tab) 格式：font-weight: bold; 取值：bold,bolder 加粗 lighter 细线(默认) 100-900 整百的数字 3.规定文字大小的属性(快捷键fz30 + tab) 格式：font-size: 30px;(一定要带单位) 4.规定文字字体的属性(ff + tab) 格式：font-family:"微软雅黑"; 如果字体是汉字要加""或''。 备选字体用,添加：font-family:"微软雅黑","字体二"; 中英文独立字体显示 font-family:"英文字体","中文字体"; 中文：宋体(simsun)/黑体(sumhei)/微软雅黑(Microsoft YaHei) 英文字体："Times New Roman"/Arial 简写 font:bold italic 20px "宋体"; 注意：字体大小与字体样式不可少并且顺序不能变，并且仅限于以上四个属性 1.文本装饰的属性(td + tab) 格式：text-decoration: underline; 取值：underline 下划线 line-through 删除线 overline 上划线 none 无(取消自带的下划线) 2.文本水平对齐属性(ta + tab) 格式：text-align: center; 取值：left,center,right 3.文本缩进的属性(ti + tab) 格式：text-indent: 2em; em:文字宽度 4.文字颜色 格式：color:; 取值： 1.英文单词 2.rgb(三个值分别代表：红，绿，蓝，范围0-255) 3,rgba(多了一个透明度属性,0-1) 4.十六进制 #FFEE00 FF代表R，EE代表G，00代表B 转换：第一位*16+第二位（仅限于此） 5.十六进制缩写 #F00 代表 #FF0000 当每两位的值都一样是就可以简写 -->
CSS学习教程之玩转CSS3色彩
01-08
传统来说，大家在CSS中使用的颜色要么是16进制格式，要么是rgb格式，就像rgb(171,205,239)。   CSS3带来了一些新的处理颜色的方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是，现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们所能，而IE直到Internet Explorer 9才会开始支持一些CSS3属性。 Opacity 这其实是一个旧属性，令人惊奇的是，它被IE的当前版本支持——尽管是以一种比较复杂的方法。 Opacity
RGBA（三原色+透明度）与十六进制颜色转换工具
08-09
在实际工作的项目中，经常会用到颜色的转换，一般是 RGBA（三原色+透明度） 转换为 十六进制颜色，或者十六进制颜色转换为 RGBA，此工具提供了 JavaScript 实现的双向转换的方法工具。
css样式背景图片设置透明度,css如何设置背景图片的透明度
热门推荐
weixin_45249263的博客
05-06 2万+
了解css如何设置背景图片的透明度吗？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获一点点实用知识。下面是本人给大家带来的参考内容，感兴趣的朋友可以看看！
CSS3 十六进制透明度
黄彪博客
02-13 1414
公司使用 sketch 做“高保真”设计，UCD 比较喜欢 “透明”的效果，每次复制 CSS 样式，就会出现 16进制的背景色，然后还有透明度，例如。#00143b 颜色的透明度是 80（十六进制），不透明是 FF, 全透明是00，因此 80的透明度是 相当于全透明的 50%解决办法： 将背景色的 16进制全部改为 十六进制颜色码转换成RGB颜色值；然后再使用 rgba() 函数。缺点：觉得效率太低了，需要每个都复制到工具网站去计算。
关于CSS中背景图片透明度问题
青莳的博客
03-05 9405
今天使用CSS设计一个后台页面，在插入背景图片后，设置透明度时，发现使用opacity设置透明度时，里面的文字内容也会随着背景一起变透明 效果如下图 于是在百度上找了很多方法，记录一下，方便以后使用 1. 背景毛玻璃效果 通过伪类选择器before为背景添加透明效果，文字使用的仍时添加效果前的样式 .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: c
css实现仅对背景图添加透明度
lemon2cen的博客
08-18 2388
由于背景图片存在一定透明度，但直接使用opacity会导致所有子元素都受到影响，为了实现改效果，采用伪类进行处理，滤镜filter中的透明度设置背景图的opacity。
【CSS】各百分比透明度 opacity 对应的 16 进制颜色值（例如：#FFFFFF80）
qq_45677671的博客
11-20 1113
CSS 各百分比透明度 opacity 对应的 16 进制颜色值（例如：#FFFFFF80）
兼容各浏览器css渐变
10-18
兼容各浏览器上下左右的渐变效果，渐变起始颜色，ff为16进制透明度
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
最新发布
Demon's blog
04-27 222
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
【React】CSS 局部样式
小秀的博客
04-26 369
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 402
【代码】vuetify3.0+tailwindcss+vite最新框架。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1167
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
js动态设置css主题(Style-setProperty)
zarek_jiamu的博客
04-27 288
定义的参考色，在开发的过程中希望后端人员能遵循// 用于按钮点击颜色num
css16进制颜色透明度50%
08-19
对不起，我之前的回答可能有点误导。实际上，CSS的16进制颜色值无法直接表示透明度。如果你想要使用16进制颜色值并设置透明度，你需要使用CSS中的其他方法。 一种常见的做法是使用rgba()函数，将16进制颜色值转换为RGBA颜色值，并在最后一个参数alpha处设置透明度。例如，如果你有一个16进制颜色值为#FF0000（红色），并想要设置透明度为50%，可以将其转换为RGBA颜色值rgba(255, 0, 0, 0.5)。 另一种方法是使用CSS3中的HSLA颜色值，将16进制颜色值转换为HSLA颜色值，并在最后一个参数alpha处设置透明度。然而，请注意，这种方法需要将16进制颜色值转换为对应的HSL颜色值，再加上alpha值。转换过程可能比较复杂。 总之，如果你想要使用16进制颜色值并设置透明度，建议使用rgba()函数。希望这次能够解答到您的问题。如果还有其他疑问，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值