位置: IT常识 - 正文

CSS设置背景颜色透明的两种方法(css设置背景颜色透明)

编辑:rootadmin
CSS设置背景颜色透明的两种方法 在css中设置背景颜色透明的方法有两种:一种是通过rgba方法设置,另一种是通过backgroundh和opacity设置

推荐整理分享CSS设置背景颜色透明的两种方法(css设置背景颜色透明),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css设置背景颜色透明度,css设置背景颜色半透明,css设置背景颜色大小,css设置背景颜色大小,css设置背景颜色大小,css设置背景颜色透明,css设置背景颜色透明,css设置背景颜色透明度,内容如对您有帮助,希望把文章链接给更多的朋友!

下面分别是css中 两种方法实现的背景颜色透明实例   

1,通过background和opacity设置背景颜色透明

background属性中属性值比较简单,所以我们简单看看opacity属性

opacity属性参数的“不透明度”是以数字表示,从0.0至1.0都可以,完全透明是0.0,完全不透明是1.0,换句话说,数字越大越不透明。参数除了可以使用"不透明度"之外,还有 inherit 继承父层属性,不过浏览器支援度较差,不建议使用。

通过backgroud和opacity设置背景颜色透明度的具体实例    代码如下:

<div style="width: 200px;height: 200px;Object-fit : contain"> <p class="pp" >哈哈哈哈哈哈</p><img src="../images/d.png"/></div> .pp{width: 200px;position: absolute;color: white;font-size: 18px;background-color: #550000;/* opacity: 0.2; */}

这是未添加opacity属性:

CSS设置背景颜色透明的两种方法(css设置背景颜色透明)

这里是通过background和opacity设置背景透明度,但是上面有文字的话,文字也会变成透明,就下面效果。

所以,看个人需求使用哪种方法才是自己想要的效果。

2,通过rgba方式设置背景色透明

所谓rgba颜色,就是rgba三原色加alpha。在给背景添加颜色的同时,提供透明度特性。

用法:background:rgba(R,G, B, A);

下面我们就来看通过rgba方式设置背景颜色透明度的具体实例:

<div style="width: 200px;height: 200px;Object-fit : contain"><p class="pp" >哈哈哈哈哈哈</p><img src="../images/d.png"/></div> .pp{width: 200px;position: absolute;color: white;font-size: 18px;background-color: rgb(85 0 0 / 46%);/* background-color: #550000; */}

rgba方式设置背景颜色透明度效果前后对比如下:

 说明:通过rgba方式设置背景颜色透明度,可以设置背景颜色透明而文字不透明,但是这种方法的兼容性不好,不兼容ie浏览器。

本文章就到此结束!

本文链接地址:https://www.jiuchutong.com/zhishi/288908.html 转载请保留说明!

上一篇:Linux的Web服务器配置(linuxweb服务器搭建教程)

下一篇:大雾笼罩下的巴伐利亚阿尔卑斯山脉,德国 (© Anton Petrus/Getty Images)(大雾笼罩的早晨)

  • 红魔6SPro拍照效果如何(红魔6pro相机怎么样)

    红魔6SPro拍照效果如何(红魔6pro相机怎么样)

  • 从注册到成单,三大步骤提升贷款业务转化率(注册单赚钱方法(转载))

    从注册到成单,三大步骤提升贷款业务转化率(注册单赚钱方法(转载))

  • 微信开通商家收款码后个人的还可以用吗(微信开通商家收款码提现要手续费吗)

    微信开通商家收款码后个人的还可以用吗(微信开通商家收款码提现要手续费吗)

  • 微信可以上传15秒的视频吗(微信可以上传15张图片吗)

    微信可以上传15秒的视频吗(微信可以上传15张图片吗)

  • 苹果xs的64g够用吗

    苹果xs的64g够用吗

  • 抖音照片配文字怎么弄(抖音照片配文字怎么做)

    抖音照片配文字怎么弄(抖音照片配文字怎么做)

  • 按什么键可以复制整个屏幕(按什么键可以复制活动窗口)

    按什么键可以复制整个屏幕(按什么键可以复制活动窗口)

  • 普通打印机能复印吗(普通打印机复印张数怎么调)

    普通打印机能复印吗(普通打印机复印张数怎么调)

  • 登录超时是什么意思(登录显示超时什么原因)

    登录超时是什么意思(登录显示超时什么原因)

  • hm370芯片组是高端的吗(hm370芯片组可以超频吗)

    hm370芯片组是高端的吗(hm370芯片组可以超频吗)

  • surface充电器灯不亮(surface充电器灯一闪一闪表示在充电吗?)

    surface充电器灯不亮(surface充电器灯一闪一闪表示在充电吗?)

  • 荣耀9x红外线功能怎么开(荣耀9x红外线功能怎么用)

    荣耀9x红外线功能怎么开(荣耀9x红外线功能怎么用)

  • 探探被永久封禁是什么原因(探探被永久封禁怎么重新注册)

    探探被永久封禁是什么原因(探探被永久封禁怎么重新注册)

  • win7旗舰版64位C盘多大

    win7旗舰版64位C盘多大

  • cpu的主频指的是什么(主频最高的cpu排行)

    cpu的主频指的是什么(主频最高的cpu排行)

  • applewatch能放音乐吗(apple watch 放音乐)

    applewatch能放音乐吗(apple watch 放音乐)

  • 拼多多收藏下单啥意思(拼多多收藏下单视频)

    拼多多收藏下单啥意思(拼多多收藏下单视频)

  • 小米9pro支持无线充电吗(华为20pro手机参数配置)

    小米9pro支持无线充电吗(华为20pro手机参数配置)

  • 抖音私信有已读功能吗(抖音私信已读撤回)

    抖音私信有已读功能吗(抖音私信已读撤回)

  • 网络电视怎么找中央1(网络电视怎么找不到搜索栏)

    网络电视怎么找中央1(网络电视怎么找不到搜索栏)

  • 48v锂电池亏电怎么激活(48v锂电池坏了怎么修)

    48v锂电池亏电怎么激活(48v锂电池坏了怎么修)

  • 货拉拉退押金多久能到账(货拉拉退押金多久才能重新加入)

    货拉拉退押金多久能到账(货拉拉退押金多久才能重新加入)

  • 快手更新不了怎么回事(快手咋更新不了新版本)

    快手更新不了怎么回事(快手咋更新不了新版本)

  • ios保持后应用台不掉线(苹果app保持在前台)

    ios保持后应用台不掉线(苹果app保持在前台)

  • qb怎么换成余额(qb怎么换成余额的钱)

    qb怎么换成余额(qb怎么换成余额的钱)

  • ddr4 2400和2660区别(ddr4 2666与2400能混用危害)

    ddr4 2400和2660区别(ddr4 2666与2400能混用危害)

  • 全民k歌怎么和好友合唱(全民k歌怎么和好友pk)

    全民k歌怎么和好友合唱(全民k歌怎么和好友pk)

  • win10任务栏颜色怎么改(win10任务栏颜色怎么调)

    win10任务栏颜色怎么改(win10任务栏颜色怎么调)

  • 十大经典排序算法(下)(十大经典排序算法(动图演示C 实现))

    十大经典排序算法(下)(十大经典排序算法(动图演示C 实现))

  • groupadd命令  创建新的用户组(使用groupadd命令创建用户组)

    groupadd命令 创建新的用户组(使用groupadd命令创建用户组)

  • 审计合同需要交税吗
  • 怎么进行增值税纳税申报
  • 房产税的计税依据包含增值税吗
  • 未达起征点附加税还需要扣税嘛
  • 餐饮服务税率是几个点
  • 发票丢失了可以报销吗
  • 小规模纳税人认定标准2023
  • 以前年度的所得税要补缴怎么办
  • 委托加工物资属于在产品吗
  • 免征增值税的免税政策
  • 债务重组的会计处理方法
  • 业务招待费扣除比例
  • 收到上个月支付的短信
  • 支付的劳务派遣费计入什么科目里
  • 为什么盈利的企业也有可能发生债务危机
  • 新企业的设立流程
  • 职业培训和职业技能培训的区别
  • 可供出售金融资产属于流动资产吗
  • 期间费用的研究费用填什么
  • 小规模税收减免
  • 建筑业预缴税款怎么退税
  • 物流公司运费账务处理
  • win7系统中英文切换快捷键
  • 企业收到政府补助需要开发票吗
  • 促销礼物
  • 销售费用中业务费包括哪些
  • 木鱼的电脑
  • yolov5使用教程
  • laravel视频教程
  • bert multihead
  • 账户维护费计入什么会计科目
  • php获取长度
  • 新成立公司建账
  • 前端跨域解决方案设计
  • vue父组件子组件
  • html扫码功能
  • mess指令
  • 印花税税目税率表新旧对比
  • ps的cc和sp
  • 存货报废如何处理方案
  • 增值税收范围
  • 勾选认证客户端不成功怎么办
  • 一般纳税人和小规模公司怎么区分
  • mongodb 聚合
  • 应该是下个月
  • 印花税怎么计算公式
  • 如何查看sqlserver实例名称
  • 防伪码显示查询次数和时间
  • 小规模纳税人应交税费的二级科目
  • 农民专业合作社属于什么经济类型
  • 营业外收入怎么结转
  • 银行预留印鉴是啥
  • 土地租金计入什么会计科目
  • 小规模减免税收入
  • 扶贫小额信贷分贷统还违规吗
  • 发票未到成本如何做分录
  • 开票未收到款会计分录
  • 工业企业出售产品应交的消费税额,应计入营业成本
  • 辞退补偿金入什么科目
  • 向法人借款凭证摘要怎么写
  • 以前年度费用科目入错 不影响以前年度利润的账务处理
  • 企业支付宝能买东西吗
  • 分公司注销余额转总公司会计分录
  • 数据库复制数据sql语句
  • MYSQL数据库应用
  • vmware8.0.4
  • win8系统教程
  • mac和iphone互动
  • linux软件安装在哪个文件夹
  • linux tracker
  • 基于centos6安装kvm服务
  • 在对linux系统中dir
  • win8系统怎么设置
  • perl 文件
  • javascript函数自调用
  • nodejs mysql库
  • python解析chunked
  • 润泽一词出自哪里
  • 个体工商户两处所得,如何减半个税
  • 计生法废止
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设