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是相对 ...
随机推荐
- Java数据结构漫谈-Stack
Stack(栈)是一种比较典型的数据结构,其元素满足后进先出(LIFO)的特点. Java中Stack的实现继承自Vector,所以其天然的具有了一些Vector的特点,所以栈也是线程安全的. cla ...
- 《第一行代码》学习笔记6－活动Activity（4）
1.SecondActivity不是主活动,故不需要配置标签里的内容. 2.Intent是Android程序中各组件之间进行交互的一种重要方式,一般可被用于 启动活动,启动服务,以及发送广播等.Int ...
- Arcgis Engine - 脱离ToolBarControl控件的命令和工具
可以手动实现脱离ToolBarControl控件的命令和工具 //打开文件. private void file_tsmItem_Click(object sender, EventArgs e) { ...
- 工欲善其事必先利其器---SQL在线可视化模型设计，（还可学习拖拽知识）
作为技术人员,在开发项目中,不可避免的要跟数据库打交道,一个完整的项目正常情况下是讨论完整体需求,有了大致的框框在脑海中后,是需要设计合理的数据库的,这时会有其他的专业的UML建模工具可以使用, 但是 ...
- hdu 1258 DFS
I - 深搜 基础 Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:10000KB 64bi ...
- 安装apache服务器时遇到只能本地访问，局域网内其他电脑不能访问apache：
安装apache服务器时遇到只能本地访问,局域网内其他电脑不能访问apache:1.查看selinux运行状态及关闭selinux/usr/sbin/sestatus -v文本模式关闭selinux: ...
- 列表:一个打了激素的数组 - 零基础入门学习Python010
列表:一个打了激素的数组 让编程改变世界 Change the world by program 列表:一个打了激素的数组 有时候我们需要把一堆东西暂时存储起来,因为他们有某种直接或者间接的联系,我们 ...
- spoj 104 Highways (最小生成树计数)
题目链接:http://www.spoj.pl/problems/HIGH/ 题意:求最小生成树个数. #include<algorithm> #include<cstdio> ...
- LeetCode_Word Ladder
Given two words (start and end), and a dictionary, find the length of shortest transformation sequen ...
- Windows下连接php5.3+sql server2008
php连接sql server真是一件闹心的事, 折腾了许久,今天有了点起色,还是不错的. mssql extension is not available anymore on Windows wi ...