开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >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) 可以设置背景色透明,内容不透明

如一下

background: rgba(255,193,7, 1);

效果图

两者都没有透明

背景透明,内容不透明

两者都透明

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

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

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

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

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

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

iOS状态栏设置

这两种方式是根据UIViewControllerBasedStatusBarAppearance也就是View controller-based status bar appearance的值的不同有相应的设置

码客说

2019/10/22

3K0

CSS3之opacity属性的简单使用

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141344.html原文链接：https://javaforall.cn

全栈程序员站长

2022/08/24

3680

CSS3之opacity属性的简单使用

01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】

background gradient position rgb size

在 CSS 中，使用渐变色需要用到 gradient 属性，而 gradient 属性分为线性渐变 linear-gradient 与径向渐变 radial-gradient。

1_bit

2022/09/09

6.9K0

01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】

现代 CSS 解决方案：文字颜色自动适配背景色！

解决方案语法 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

CSS背景缩写、简写详细

CSS背景缩写、简写不太会这个，到网上搜了下，发现写的都不中意，就想到自己写一个出来背景共有8个属性： background-color 背景颜色 background-position 背景图像的位置 background-size 背景图片的尺寸 background-repeat 如何重复背景图像 background-origin 背景图片的定位区域 background-clip 背景的绘制区域 /* 底部详细说明 */ back

我不是费圆

2020/09/21

2.5K0

background blur filter image opacity

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

用户9615083

2022/12/25

5670

css3背景颜色渐变属性（Gradients）

在项目中有很多地方可以用到背景色的渐变，例如：左侧菜单栏的背景色，顶部导航栏背景色等等。

Devops海洋的渔夫

2019/07/27

2.6K0

微搭低代码样式开发-背景色

微搭低代码

小程序搭建的时候如果只使用组件的默认样式，搭建出来的程序样式比较呆板，好听一点的词就是比较素。在没有设计师参与的情况下，我们怎么能美化一下样式呢？学习的方法是借鉴官方的模板，我们将官方的模板拆分出知识点，细节学会了日后自己搭建小程序的时候也就有了思路。

低代码布道师

2021/08/10

9450

CSS基础-背景属性：颜色、图片、重复

基础设计 css 容器 background

在网页设计中，背景是构建视觉层次和氛围的关键元素之一。CSS的背景属性为我们提供了强大的工具，用于控制元素的背景颜色、图片、以及它们的显示方式。本文将深入浅出地探讨CSS背景属性的基础知识，包括常见问题、易错点及避免策略，并通过实际代码示例加以说明。

Jimaks

2024/06/10

4620

前端课程——颜色与单位

css html 网站

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组件之基础组件（一）

ios android 网站

说明：在介绍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状态栏设置

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验