前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS 使用rgba 设置背景色透明,内容不透明

CSS 使用rgba 设置背景色透明,内容不透明

作者头像
拿我格子衫来
发布于 2022-01-24 10:55:29
发布于 2022-01-24 10:55:29
2.9K00
代码可运行
举报
文章被收录于专栏:TopFETopFE
运行总次数:0
代码可运行

使用

css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1; 1为不透明

如rgba(255,255,255,0.8) 可以设置背景色透明,内容不透明

如一下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
background: rgba(255,193,7, 1);

效果图

两者都没有透明

背景透明,内容不透明

两者都透明

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
iOS状态栏设置
这两种方式是根据UIViewControllerBasedStatusBarAppearance也就是View controller-based status bar appearance的值的不同有相应的设置
码客说
2019/10/22
3K0
CSS3之opacity属性的简单使用
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/141344.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/24
3680
CSS3之opacity属性的简单使用
01超精美渐变色动态背景完整示例【CSS动效实战(纯CSS与JS动效)】
在 CSS 中,使用渐变色需要用到 gradient 属性,而 gradient 属性分为 线性渐变 linear-gradient 与 径向渐变 radial-gradient。
1_bit
2022/09/09
6.9K0
01超精美渐变色动态背景完整示例【CSS动效实战(纯CSS与JS动效)】
现代 CSS 解决方案:文字颜色自动适配背景色!
其核心功能就是,让我们能够基于一个现有颜色 A,通过一定的转换规则,快速生成我们想要的颜色 B。
Sb_Coco
2024/01/09
1K0
现代 CSS 解决方案:文字颜色自动适配背景色!
第161天:CSS3实现兼容性的渐变背景(gradient)效果
在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不支持Opera浏览器。
半指温柔乐
2018/09/11
1.4K0
第161天:CSS3实现兼容性的渐变背景(gradient)效果
总结CSS3新特性(颜色篇)
总结CSS3新特性(颜色篇) 颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调)
贾顺名
2018/04/12
8340
总结CSS3新特性(颜色篇)
CSS背景缩写、简写详细
CSS背景缩写、简写 不太会这个,到网上搜了下,发现写的都不中意,就想到自己写一个出来 背景共有8个属性: background-color    背景颜色 background-position    背景图像的位置 background-size     背景图片的尺寸 background-repeat   如何重复背景图像 background-origin     背景图片的定位区域 background-clip      背景的绘制区域  /* 底部详细说明 */ back
我不是费圆
2020/09/21
2.5K0
CSS背景缩写、简写详细
CSS3 新特性
如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
用户9615083
2022/12/25
5670
CSS3 新特性
css3背景颜色渐变属性(Gradients)
在项目中有很多地方可以用到背景色的渐变,例如:左侧菜单栏的背景色,顶部导航栏背景色等等。
Devops海洋的渔夫
2019/07/27
2.6K0
微搭低代码样式开发-背景色
小程序搭建的时候如果只使用组件的默认样式,搭建出来的程序样式比较呆板,好听一点的词就是比较素。在没有设计师参与的情况下,我们怎么能美化一下样式呢?学习的方法是借鉴官方的模板,我们将官方的模板拆分出知识点,细节学会了日后自己搭建小程序的时候也就有了思路。
低代码布道师
2021/08/10
9450
CSS基础-背景属性:颜色、图片、重复
在网页设计中,背景是构建视觉层次和氛围的关键元素之一。CSS的背景属性为我们提供了强大的工具,用于控制元素的背景颜色、图片、以及它们的显示方式。本文将深入浅出地探讨CSS背景属性的基础知识,包括常见问题、易错点及避免策略,并通过实际代码示例加以说明。
Jimaks
2024/06/10
4620
前端课程——颜色与单位
CSS 中的前景色和背景色就是 color 和 backgorund-color 两个属性,其中 color 属性表示前景色,background-color 属性表示背景色。
Dreamy.TZK
2020/04/09
1.1K0
CSS 背景(background)
background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。
星辰_大海
2020/09/30
2.3K0
CSS3导航菜单背景模糊特效代码解析/源码下载
在第一个demo中,我们希望菜单项在开始时是模糊的。为了做到这一点,我们给超链接元素透明的颜色和白色的文字阴影。并为所有的属性添加transitions。
用户5997198
2019/08/12
1.8K0
CSS3导航菜单背景模糊特效代码解析/源码下载
CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档。 一、阴影 1.1、文字阴影 text-shadow <
张果
2018/01/04
3.3K0
CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
【CSS进阶】CSS 颜色体系详解
说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家。 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。 接下来的行文内容大概会按照
Sb_Coco
2018/05/28
1.9K0
【CSS】11 个 Sass 中常用的颜色函数,你需要知道一下
今天我们来看一下 Sass 中的颜色函数,颜色函数可以分为三部分,分别是颜色设置、颜色获取以及颜色操作。
pingan8787
2021/07/20
1.8K0
css 背景透明
今天在开发一个漂浮在背景图上方的模态动画,之前只记得opacity和rgba可以实现透明度设置,但是在实现“背景透明,文字不透明”的效果中却不是都可行的,下面我们就来实际测试一下。
IT工作者
2022/02/15
3K0
Flutter lesson 5: Flutter组件之基础组件(一)
说明:在介绍Widget的出后可能会涉及到一些属性,例如 Color, EdgeInsets等等。我会在其中穿插的说明,以后遇到这样的问题就不会再次说明。
踏浪
2019/07/31
2.2K0
Flutter lesson 5: Flutter组件之基础组件(一)
Sass 基础(七)
Sass Maps 的函数-map-remove($map,$key),keywords($args)     map-remove($map,$key)     map-remove($map,$key)函数是用来删除当前$map中的某一个$key,从而得到一个新的     map,其返回的值是一个map.他并不能直接从一个map 中删除另一个map,仅能通过删除     map中的某个key 得到新的map     $map:map-remove($social - colors,drib
用户1197315
2018/01/19
8980
相关推荐
iOS状态栏设置
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验