html学习笔记(一)div的透明设置
要使得div的透明度设置,有两种方法。
第一种:使用opacity属性,单词的意思是不透明性,你可以设置它的值,范围是0到1,1为不透明,0为全透明。具体使用如下:
css代码:
#div01{
background:#FFF;
width:500px;
height:500px;
opacity:0.5;
}
body里面的代码:
<div id="div01">
asdasjdkahsdkahdklashdlksa
</div>
图片效果如下:

注意:这种方法会使得div中的所有内容都变得透明度一样,如果你设置全透明,则div中的字体也会变得全透明从而看不到。
第二种方法:
使用background:rgba(x1, x2, x3, x4);x1,x2,x3分别为颜色的三个基本数据。x4位不透明度,范围为0到1,如果设为1,则不透明,设为0则全透明。
css代码:
#div01{
background:#FFF;
width:500px;
height:500px;
background:rgba(200, 100, 100, 0.5);
}
html代码:
<div id="div01">
asdasjdkahsdkahdklashdlksa
</div>
注意:这个设置的透明度就只有div的背景透明,而div中的字体不会跟着变。如果你设置为全透明,但是div中的字体却不会变得透明。
html学习笔记(一)div的透明设置的更多相关文章
- DSP EPWM学习笔记2 - EPWM相关寄存器设置问题解析
DSP EPWM学习笔记2 - EPWM相关寄存器设置问题解析 彭会锋 本篇主要针对不太熟悉的TZ 故障捕获 和 DB 死区产生两个子模块进行学习研究 感觉TI的寄存器命名还是有一定规律可循的 SEL ...
- golang学习笔记6 beego项目路由设置
golang学习笔记5 beego项目路由设置 前面我们已经创建了 beego 项目,而且我们也看到它已经运行起来了,那么是如何运行起来的呢?让我们从入口文件先分析起来吧: package main ...
- python学习笔记——(一)基础设置
python的学习,今天就开始上开发环境Pycharm,这样以后在调试,使用和学习起来就方便很多. 我用的是JetBrains PyCharm Community Edition 2018.1.1 x ...
- OpenXml SDK学习笔记(4):设置文件级别的样式
观察上一段日记最后的代码: 这里的样式基本可以理解为行内CSS.那么既然有行内的样式,就肯定有外部的样式.那这部分就对应笔记1里说的style.xml文件.这个文件对应的是Document.MainD ...
- linux —— 学习笔记(环境变量的设置)
目录 环境变量概要 与环境变量相关的文件 设置环境变量 注意以及相关 1.环境变量概要 环境变量,简单来说,是储存了环境信息的变量.它可以让你在不指明全部路径的情况下执行某脚本或某应用程序,比如在 l ...
- Android(java)学习笔记242:多媒体之设置全屏的方法
在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...
- Android(java)学习笔记82:利用SpannableString设置复合文本
1. SpannableString设置复合文本: TextView通常用来显示普通文本,但是有时候需要对其中某些文本进行样式.事件方面的设置.Android系统通过SpannableString类来 ...
- ObjectARX学习笔记(三十二)----怎样设置AcDbMText对齐方式
//_T("\\pxql;") 居左 //_T("\\pxqr;") 居右 //_T("\\pxqc;") 居中 //_T("\\ ...
- Android(java)学习笔记185:多媒体之设置全屏的方法
在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...
随机推荐
- git commit失败
1.使用命令 git rm test.txt 删除版本库中文件, 下一步:git commit 提交 出现如图: 这是因为没有同时提交信息,即:git commit -m "这里是信息&q ...
- 利用Angular2的Observables实现交互控制
在Angular1.x中,我们使用Promise来处理各种异步.但是在angular2中,使用的是Reactive Extensions (Rx)的Observable.对于Promise和Obser ...
- loj #2254. 「SNOI2017」一个简单的询问
#2254. 「SNOI2017」一个简单的询问 题目描述 给你一个长度为 NNN 的序列 aia_iai,1≤i≤N1\leq i\leq N1≤i≤N,和 qqq 组询问,每组询问读入 l1 ...
- silverlight browse information
public class Browser { /// <summary> /// During static instantiation, only the Netscape flag i ...
- springcloud系列四 搭建服务模块重点讲解
首先这个服务地址:一定不要写错,是自己注册中心开启的地址 如果注意到这些了,可以简单的进行操作,也可以不需要mybatis与数据库连接,在controller里直接返回相应的数据可以了,不用这么幸苦的 ...
- README.md使用
1.标题: # 一级标题 ## 二级标题 ### 三级标题 2.换行: <br> 3.代码: ``` 代码在中间 ``` 4.表格: 表头 | 表头 | 表头 ---- | ----- | ...
- OpenCV教程(转自:浅墨_毛星云博客)
2.图像的载入,显示和输出 一站式完全解析 本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/detail ...
- MB Star C5 Functions
The MB STAR C5 notion and brand combination for hardware and software program components will be the ...
- .NET Core单元测试覆盖率统计coverlet配置和使用
https://segmentfault.com/a/1190000017569492 需要使用: 使用 Moq 测试.NET Core 应用 https://www.cnblogs.com/c ...
- angularJs(2)表单中下拉框单选多选
多选 <input type="checkbox" ng-model='game' ng-true-value="1" ng-false-value=&q ...