位置: 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)(大雾笼罩的早晨)

  • 预收账款开票怎么做账
  • 外轮供应公司远洋运输供应公司的退税申报?
  • 附加税税率是多还是少
  • 简易计税方法能开专用发票吗
  • 流转税解释
  • 广告费和业务宣传费的区别是什么
  • 怎样根据税负率调账
  • 金税盘清卡怎么统计税额
  • 一般纳税人资格证书是什么样的
  • 长期债券是指偿还期限超过几个月的债券
  • 建筑行业会计如何合理避税
  • 借别人的公账转账犯法吗
  • 小规模纳税人纳税申报流程
  • 计提城建税计入什么科目
  • 开票信息没有电话号码可以吗
  • 未在规定期限内发出追索通知
  • 差额征税的差额怎么算
  • 模板摊销率
  • 资产总额小于所有者权益合计
  • 应收账款核销会议纪要
  • 一个月的销售额
  • 金税盘抄税报税清卡流程图
  • 话费打印发票怎么缩小
  • 什么经营范围可以开培训费
  • 个人车辆过户给公司
  • 商业承兑汇票如何查询
  • 如何解决无线网络连接问题
  • swupdtmr.exe - swupdtmr进程是什么意思 什么作用
  • 上年度第四季度总结
  • 企业会计师证是咋回事
  • php输出一维数组
  • 购入研发设备
  • 缴纳集团公司的税收
  • php和ajax用哪个调用数据
  • 巴伐利亚州地图
  • 企业间无偿借款涉税
  • axios入门
  • 企业所得税申报表模板
  • 冰岛北部内陆景观有哪些
  • php 常用算法
  • html5新增的标签元素有哪些
  • 进项税额销项税额
  • 个税多计提了账务处理
  • 金税盘减免怎么做分录
  • 删除python包
  • 织梦怎么安装
  • 土地出让金抵扣进项税
  • 资产处置损益的定义
  • 对于投资者而言购买债券型理财产品面临的最大风险来自
  • sql存储过程使用
  • 发放工资社保的账务处理
  • 疫情防控期间临时性工作补助申请
  • 国税地税发票样式区别
  • 长期待摊费用的最新账务处理
  • 收到补助款的会计分录
  • 股东退股如何清算表格
  • 明细分类账表格
  • forval命令
  • 数据库账号密码怎么修改
  • Windows10 64位安装MySQL5.6.35的图文教程
  • linux服务器安装虚拟机
  • 设置centos时区修改时间的方法
  • open bsd
  • ubuntu虚拟机怎么用
  • 找回丢失的抖音如何恢复抖音
  • centos8 redhat
  • 添加或删除程序在哪win10
  • 导入extjs、jquery 文件时$使用冲突问题解决方法
  • jquery easy ui
  • Node.js中的全局对象有
  • 简单好用的记账app
  • node.js搭建服务器
  • 简单介绍linux系统有哪些主要特点?
  • python迭代器的作用
  • jquery取消单选框选中
  • python所有语句
  • js面向对象写法
  • python中lambda怎么用
  • 实体经济的行业有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设