要使得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的透明设置的更多相关文章

  1. DSP EPWM学习笔记2 - EPWM相关寄存器设置问题解析

    DSP EPWM学习笔记2 - EPWM相关寄存器设置问题解析 彭会锋 本篇主要针对不太熟悉的TZ 故障捕获 和 DB 死区产生两个子模块进行学习研究 感觉TI的寄存器命名还是有一定规律可循的 SEL ...

  2. golang学习笔记6 beego项目路由设置

    golang学习笔记5 beego项目路由设置 前面我们已经创建了 beego 项目,而且我们也看到它已经运行起来了,那么是如何运行起来的呢?让我们从入口文件先分析起来吧: package main ...

  3. python学习笔记——(一)基础设置

    python的学习,今天就开始上开发环境Pycharm,这样以后在调试,使用和学习起来就方便很多. 我用的是JetBrains PyCharm Community Edition 2018.1.1 x ...

  4. OpenXml SDK学习笔记(4):设置文件级别的样式

    观察上一段日记最后的代码: 这里的样式基本可以理解为行内CSS.那么既然有行内的样式,就肯定有外部的样式.那这部分就对应笔记1里说的style.xml文件.这个文件对应的是Document.MainD ...

  5. linux —— 学习笔记(环境变量的设置)

    目录 环境变量概要 与环境变量相关的文件 设置环境变量 注意以及相关 1.环境变量概要 环境变量,简单来说,是储存了环境信息的变量.它可以让你在不指明全部路径的情况下执行某脚本或某应用程序,比如在 l ...

  6. Android(java)学习笔记242:多媒体之设置全屏的方法

    在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...

  7. Android(java)学习笔记82:利用SpannableString设置复合文本

    1. SpannableString设置复合文本: TextView通常用来显示普通文本,但是有时候需要对其中某些文本进行样式.事件方面的设置.Android系统通过SpannableString类来 ...

  8. ObjectARX学习笔记(三十二)----怎样设置AcDbMText对齐方式

    //_T("\\pxql;") 居左 //_T("\\pxqr;") 居右 //_T("\\pxqc;") 居中 //_T("\\ ...

  9. Android(java)学习笔记185:多媒体之设置全屏的方法

    在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...

随机推荐

  1. equals和==的区别 (Java基础)

    1. == 是一个运算符.2.Equals则是string对象的方法,可以.(点)出来. 我们比较无非就是这两种 1.基本数据类型比较 2.引用对象比较 1.基本数据类型比较 ==和Equals都比较 ...

  2. django 学习之DRF (一)

    Django框架基础DRF-01 前后端分离介绍 1.前后端不分离图解 2.前后端分离图解     3.为什么要学习DRF    DRF可以帮助我们开发者快速的开发⼀个依托于Django的前后后端分离 ...

  3. 模板【洛谷P3390】 【模板】矩阵快速幂

    P3390 [模板]矩阵快速幂 题目描述 给定n*n的矩阵A,求A^k 矩阵A的大小为n×m,B的大小为n×k,设C=A×B 则\(C_{i,j}=\sum\limits_{k=1}^{n}A_{i, ...

  4. 12306 Pytho抢票代码

    1.需要先安装python环境 2.安装selenium模拟用户来操作浏览器 3.将chromedriver驱动放入chrome浏览器应用根目录 4.用文本编辑器打开脚本,编辑购票人信息 5.通过cm ...

  5. org.json里实现XML和JSON之间对象互转

    org.json包里有一个类org.json.XML可以实现XML和JSON之间的转换.http://www.json.org/javadoc/org/json/XML.html JSONObject ...

  6. Android 远程连接数据库。。。。。

    本来是 6.0.6  换成mysql 5.1.14 驱动ok.... 将方法 放在 new Thread() 解决..... 只能在主线程绘制ui.... 解决办法...子Thread 获取数据后,将 ...

  7. hdu3483 A Very Simple Problem 非线性递推方程2 矩阵快速幂

    题目传送门 题目描述:给出n,x,mod.求s[n]. s[n]=s[n-1]+(x^n)*(n^x)%mod; 思路:这道题是hdu5950的进阶版.大家可以看这篇博客hdu5950题解. 由于n很 ...

  8. hive复杂格式array,map,struct使用

    -- 创建数据库表,以array作为数据类型 drop table if exists person; create table person( name string ,work_locations ...

  9. 问题:jQuery中遍历XML文件时候,获取子节点children不支持的情况(已解决)

    问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...

  10. vue入门----------scss的配置使用

    1.安装相应的依赖 cnpm install sass-loader --save-dev cnpm install node-sass --save-dev 2.在build文件下的webpack. ...