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是相对 ...
随机推荐
- JS生成不重复随机数
说明 我们可以用Math.random()的方法轻松的生成 一个随机的数字,但是这个数字可能是重复的.有时候,我们需要一个不重复的随机数,可以用很多的方法来实现这个要求,以下方法是效率最高的. 解释 ...
- OpenGL ES 2.0 限定符
限定符 说明 作用 attribute 一般用于各个顶点各不相同的量,如顶点位置.颜色等 属性限定符,修饰的变量用来接收渲染管线传递进顶点着色器的当前顶点的各种属性值. 只能用来修饰符点数标量,浮点数 ...
- EL表达式复习
EL表达式格式: 格式1:${objName.attribute} 执行的过程为:从pageContext.request.session.application中依次查找绑定名为“user”的对象, ...
- Jquery各版本下载，附Jquery官网下载方法
jQuery version 2.1.1 http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js http://ajax.aspnetcdn.com ...
- Android再学习-20141018-布局-进度条
20141018-Android再学习 对齐至控件的基准线 为了保证印刷字母的整齐而划定的线(四线三格的第三条线). android:layout_alignBaseline 与父控件的四个边缘对齐( ...
- 基于cygwin构建u-boot（三）make错误忽视
接上文,修改gcc 的-std标准后,.depend文件处理仍然出现了错误: 五.错误:make中命令报错(sed找不到需要的文件) 错误告警如下: make -C examples/api all ...
- Silverlight js html 相互调用
1.sl调用js 比如我们在页面中定义一个js函数: <script type="text/javascript"> function fnTest(ms ...
- 让WordPress的作者在后台只能看到自己的文章
今天需要对WordPress后台进行调整,目的是为了只能让当前用户看见自己所发表的文章,而WordPress默认是登陆用户可以看到所有用户发表的文章. WordPress中的用户角色分的比较详细,作者 ...
- RAC之RMAN恢复
之前整理的RMAN 有关还原的文章: RMAN 系列(五) ---- RMAN 还原 与 恢复 http://blog.csdn.net/tianlesoftware/archive/2010/07/ ...
- ActionBar Fragment运用最佳实践
ActionBar Fragment运用最佳实践