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是相对 ...
随机推荐
- QTP描述性编程中往WebEdit控件输入文字问题
在网上查找到许多相关的描述性编程的案例,自己就想动手一试,于是在专家视图中输入如下代码: systemUtil.Run "http://www.baidu.com" wait(15 ...
- Shiro 权限框架使用总结
我们首先了解下什么是shiro ,Shiro 是 JAVA 世界中新近出现的权限框架,较之 JAAS 和 Spring Security,Shiro 在保持强大功能的同时,还在简单性和灵活性方面拥有巨 ...
- OpenGL ES 2.0 卷绕和背面剪裁
基本知识 背面剪裁是指渲染管线在对构成立体物体的三角形图元进行绘制时,仅当摄像机观察点位于三角形正面的情况下才绘制三角形. OpenGL ES中规定若三角形中的3个顶点的卷绕顺序是逆时针则摄像机观察其 ...
- Introduction to the POM
原文:https://maven.apache.org/guides/introduction/introduction-to-the-pom.html Introduction to the POM ...
- 史上最全前端面试题(含答案) - Web开发面试题
HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用 ...
- web app之rem
rem是什么? rem:font size of the root element,是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位. em:font size of the elemen ...
- 107个常用Javascript语句
1.document.write( " "); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document- >html- >(head,body ...
- RBL, UBL, Uboot的关系
RBL, UBL, Uboot的关系 1)RBL=ROM Bootloader,UBL=user Bootloader. 2)RBL为TI固化在芯片ROM中的bootloader,OMAP上电启动过后 ...
- 利用内存结构及多线程优化多图片下载(IOS篇)
利用内存结构及多线程优化多图片下载(IOS篇) 前言 下载地址, 后续发布, 请继续关注本blog 在IOS中,我们常常遇到多图片下载的问题.最简单的解决方案是直接利用别人写好的框架.但是这如同练武, ...
- 【POJ】Buy Tickets（线段树）
点更新用法很巧妙的一道题.倒序很容易的找到该人的位置,而update操作中需要不断的变化下标才能合理的插入.看了别人写的代码,学习了. #include <iostream> #inclu ...