opacity和background的rgba区别

最新推荐文章于 2024-04-26 16:52:43 发布
最新推荐文章于 2024-04-26 16:52:43 发布
阅读量459 收藏 1
点赞数
分类专栏： CSS 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Clover_zlx/article/details/130692239
版权

首先opacity是css属性，可以设置任何元素的透明度，包括元素内容、边框和背景

【它的取值是0到1，表示从完全透明到完全不透明的变化，使用opacity设置元素的透明度时候，元素和他的内容都会具有相同的透明度】

background的rgba是css中设置元素背景色的一种方式，也可以来设置背景图的透明度，他的透明度的范围是rgba(r,g,b,a),a表示透明度，取值范围是0到1

不同点是：background的rgba可以单独控制元素的背景颜色或图像的透明度，而不影响元素内容和边框的透明度，并且rgba还可以和box-shadow、text-shadow一起使用

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元索内的所有内容的透明度

而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果! )

Clover‘s Blog
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
有关opacity或RGBA设置颜色值及元素的透明值
12-13
opacity声明来设置元素的透明值（改透明度的值介于0-1之间的小数, 0.5表示50%透明）。 opacity的特点是：当opacity设置元素的透明值，内部的文字及元素也会透明  复制代码代码如下:.demo{ background-color:red; filter:alpha(opacity=30); opacity:0.3; } 注：这段代码class为demo的标签元素的透明值为30%，里面的文字及元素透明值也会变成30% RGBA也是用来设置颜色的。 　　R:红色值 正整数 | 百分数 　　G:绿色值 正整数 | 百分数 　　B:蓝色值 正整数 | 百分数　 　　A
css 实现背景图片拉伸
dxh_0829的专栏
08-19 1470
使用css3 属性：background-size background-size：cover   即可实现像桌面壁纸一样拉伸 以下是w3c上面的解释： 语法 background-size: length|percentage|cover|contain; 值 描述   length 设置背景图像的高度和宽
css中使用rgba和opacity设置透明度的区别（附图）
12-30
1.使用rgba设置背景色的透明 效果如下： <body> <div id=box> 你好啊！ </div> </body> body { background-color:red; } #box{ width:200px; height:200px; margin:100px auto; text-align:center; line-height:200px; color:white; background-color:rgba(182,255,0,.5); } 2.使用opacity
前端如何设置背景颜色的透明度 css中的 rgba() 函数详解 ：background-color: rgba(255,192,203,0.3)
宝藏女孩的成长日记
12-14 1万+
目录前言rgba() 函数 详解再分享一个小技巧哈哈哈 前言 今天在开发移动端的时候感觉没背景颜色有点丑，再加上自己做的是蛋糕app，觉得暖色应该会很好看，于是就用了这行代码 background-color: rgba(255,192,203,0.2); 实现的效果如图： 接下来就介绍如何使用css中的 rgba() 函数 rgba() 函数 详解 rgba() 函数使用红®、绿(g)、蓝(b)、透明度(a)的叠加来生成各式各样的颜色。 rgba 即红色、绿色、蓝色、透明度（red, green, b
background:rgba()
热门推荐
Clownfishl的博客
03-12 2万+
RGBA
CSS 之 background 系列属性详解
weixin_45092437的博客
03-09 2万+
背景系列属性，共包含9种属性：background-color：设置元素的背景颜色。background-image：设置元素的背景图片。background-size：设置元素背景图片的大小。background-position：设置元素背景图片的位置。background-repeat：设置背景图片是否重复，以及如何重复。background-clip：设置元素背景的渲染区域。background-origin：设置元素背景的定位区域。background-attachment：设置元素的背景图片是否
几种颜色单位设置（颜色设置）
comegoing_xin_lv的博客
07-14 1735
常见颜色标准设置
3.7背景色半透明
qq_62865634的博客
09-04 1142
本文仅仅简单介绍了css3为我们背景颜色半透明效果background：rgba。
背景 back-ground
m0_55832273的博客
04-01 1149
背景 back-ground 【tips】背景色与背景图是可以一起设置的。 1.背景颜色 （掌握） 背景色 background-color 有三种表达方式： 单词 （颜色英文名称） 例:（red、green、blue） 。 十六进制： 1.RGB 。例：【background-color: rgb(0, 0, 0);】。 2.RGBA （A指的是透明度）。 例：【background-color：rgba（0，0，0，0.5）】。 3.直接写十六进制数值，前面必须加‘#’，否则不生效 。例：(bac
CSS的background背景属性详解
qq2754289818的博客
05-22 5120
CSS的background背景属性详解 background-color: 背景颜色 - background-image: 背景图片 - background-repeat: 重复背景图片 - background-attachment: 是否固定或者随着页面的其余部分滚动 - background-position: 背景图片的位置 - background-size: 背景的尺寸 - background-origin: 背景图片定位区域 - background-clip: 背景图
RGBa色彩的浏览器支持分析
12-07
复制代码代码如下:div { background: rgba(200, 54, 54, 0.5);} 它允许我们为元素添加透明色。或许我们习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个问题。...
CSS3中的opacity属性使用教程
12-13
RGBA和opacity 语法: R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数| 百分数 A：透明度。取值0~1之间 CSS Code复制内容到剪贴板 /* IE6 – 8 */  filter: alpha(opacity=80); ...
CSS通过RGBa将一个元素设置为透明效果
12-13
复制代码代码如下: div { background: rgba(200, 54, 54, 0.5); } 它允许我们为元素添加透明色。或许我们习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个...
CSS 网页布局（详解网页的布局构造）
百赢出品，必属精品
04-26 1142
网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。
scrollintoview方法滚动距离顶部距离
weixin_55932347的博客
04-26 195
方法是 DOM API 的一部分，用于将元素滚动到视图中。这个方法接收一个布尔值参数。，指示是否需要滚动到视图的顶部。
【热门话题】PostCSS：现代前端开发中的CSS增强工具
鑫宝的博客
04-26 1280
PostCSS是一个用 JavaScript 编写的、用于转换 CSS 代码的开源库。它并非替代 CSS，而是作为一个强大的中间层，通过插件系统对原始CSS进行解析、转换、优化，最终生成符合当前及未来浏览器兼容性的高效CSS代码。PostCSS的诞生，旨在提供一个灵活且可扩展的平台，帮助开发者更好地驾驭CSS，实现高效、规范、前瞻性的样式开发。PostCSS作为一款强大的CSS处理工具，凭借其插件化架构、对浏览器兼容性的卓越支持以及对CSS新特性的前瞻实现，已成为现代前端开发不可或缺的一部分。
SCSS的基本使用(一)
大圣归来圣骑士清欢的博客
04-22 495
SCSS的基本使用、语法
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1048
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
css边距的接触
最新发布
2401_83693610的博客
04-26 868
4个边 padding: 0px;上下 左右 padding: 0px 20px;上 左右 下 padding: 0px 20px 30px;上 右 下 左 padding: 0px 20px 30px 40px;平移这个元素位置的一半 :transform: translate(-50%,0px);左右 上下居中。
css opacity
07-22
CSS opacity 是一种控制元素透明度的属性。它可以接受一个介于 0（完全透明）和 1（完全不透明）之间的值，也可以使用百分比表示。例如，设置一个元素的 opacity 为 0.5，那么这个元素将会半透明显示，它的背景色或背景图片会透过显示出来。下面是一个简单的例子： ```html <div style="background-color: blue; opacity: 0.5;"> 这是一个半透明的蓝色元素。 </div> ``` 除了使用 opacity 属性，还可以使用 RGBA 颜色值来控制元素的透明度，例如： ```html <div style="background-color: rgba(255, 0, 0, 0.5);"> 这是一个半透明的红色元素。 </div> ``` 其中，最后一个参数 0.5 表示透明度为 50%。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Clover‘s Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值