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是相对 ...
随机推荐
- 变量a的定义
1.一个整型数 int a; 2.一个指向整型数的指针 int *a; 3.一个指向指针的指针,它指向的指针是指向一个整形数 int **a; 4.一个有10个整型数的数组 ]; 5.一个有10个指针 ...
- 百度地图HTML接口
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Private Members in JavaScript
Private Members in JavaScript Douglas Crockford www.crockford.com JavaScript is the world's most mis ...
- KMP算法———模板
做出KMP字符串匹配算法心情也是好好哒,萌萌哒. 感谢黄学长,感谢栋栋! #include<cstdio>#include<string>#include<iostrea ...
- 解决mini2440开发板和虚拟机相互ping不通
很奇怪的事,前段时间使用都还是好好的,但今天不知什么原因开发板和虚拟机怎么也无法PING通. 虚拟机用的:fedora14 开发板IP:192.168.0.250 虚拟机IP:192.168.0.10 ...
- php正则验证手机号码
protected function checkphone(){ if(preg_match("/^1[34578]\d{9}$/", $phone)){ return false ...
- Oracle11g R2学习系列 之六数据库链接，快照及序列
Create public database link link_name Connect to user identified by password using 'DBName' 为'DBName ...
- jQuery中的插件的编写和使用
1,常用的jQuery插件:表单验证插件formValidator a.目前支持5大验证方式:1.inputValidator(针对input,textarea,select控件的字符长度,值范围,选 ...
- js判断上传文件的类型和大小
//检测文件大小和类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value ...
- 如何从数据库(实体提供者)读取安全用户(转自http://wiki.jikexueyuan.com/project/symfony-cookbook/entity-provider.html)
Symfony 的安全系统可以通过活动目录或开放授权服务器像数据库一样从任何地方加载安全用户.这篇文章将告诉你如何通过一个 Doctrine entity 从数据库加载用户信息. 前言 在开始之前,您 ...