css中使用rgba和opacity设置透明度的区别
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(,,,.);
}
2.使用opacity设置背景色的透明
#box{
width:200px;
height:200px;
margin:100px auto;
text-align:center;
line-height:200px;
color:white;
background-color:rgb(,,);
opacity:0.5;
}
总结：通过2中效果的比较我们发现opacity会同时影响字体的透明度
css中使用rgba和opacity设置透明度的区别的更多相关文章
- css中的border-collapse属性如何设置表格边框线？（代码示例）
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- css中的毛玻璃（不是透明度） 简单文档
其实毛玻璃很简单 只需要在css中加入 backdrop-filter:blur(8px); 8px是模糊力度 注意:使用该方法前需要设置背景不能是透明(如果是显示这个元素下面的图像记得半透明,例子就 ...
- 有关CSS中字体响应式的设置
在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...
- CSS中字体响应式的设置
在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...
- css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录 这个不用多说,就是程序 ...
- css中关于table的相关设置
一.设置好看的单边框表格 1.一种实现方式 分别给table标签和td标签设置不在同一方向的border属性,如下table设置‘左上’边框,td设置‘右下’边框.其他设置方式同样可以实现. tabl ...
- css中单位px，em，rem的区别
1,px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 2,em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...
- CSS中px和em属性的特点与区别
详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...
随机推荐
- VS2010 rdlc 被除数为0 显示错误号
=Sum(Fields!ROCKNUM.Value/Fields!SEND.Value*100) 当Fields!SEND.Value为0或者空时,显示错误号 修改: =IIF(isnothing(F ...
- sql两个表联合更新
update TableA set id=TableB.id from TableA,TableB where TableA.name=TableB.name
- 表格table常见的边框设置和初步的立体效果
做网页时经常会遇到表格,常见的表格如下: <style type="text/css"> .tbtest0 { width:500px; height:200px; b ...
- Visifire Chart控件设置 柱状图 条的宽窄
Chart myChart = new Chart();myChart.DataPointWidth = 5;宽度以PlotArea的百分比为单位,如下例: chart.Width = 500; c ...
- （转载）iOS 多媒体
音频:(音效.音乐) 在iOS中音频播放从形式上可以分为音效播放和音乐播放.前者主要指的是一些短音频播放,通常作为点缀音频,对于这类音频不需要进行进度.循环等控制.后者指的是一些较长的音频,通常是主音 ...
- Ruby和Rails开发环境安装
更新包管理 sudo apt-get update 安装curl sudo apt-get install curl *安装rvm via curl \curl -L https://get.rvm. ...
- html 作业1
<body bgcolor="#000000" topmargin="200px" leftmargin="200px" text=& ...
- 手机QQ v4.2 有感
因为经常宅宿舍,很少出门,所以无论微信还是手机QQ都很少使用. 刚好最近见别人发来的表情我的2012自改版QQ总是无法解析,只能显示[吼叫].[啦啦]之类的字符,于是更新了v4.2的手机QQ把玩一番, ...
- JVM性能调优博客
http://houjixin.blog.163.com/blog/static/35628410201411275719843/ http://blog.csdn.net/lastsweetop/a ...
- SqlServer 使用小技巧
1.在sqlserver下直接画ER图 步骤:点击数据关系图 右击新建数据关系图这样就ok 了 2,查看表的设计结构或表中的数据 步骤:右击选择设计或查看前百行 3,监测程序对数据库的操作 点击工具 ...