要使得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. Linux 编写安全巡检脚本

    Linux 编写安全巡检脚本 检测/etc/passwd,/etc/shadow文件是否锁定 检测/etc/login.defs配置文件中密码有效期设置是否得当 检查所有用户账户(非系统账户)中是否存 ...

  2. THINKPHP 框架的模板技术

    //echo C('name'); App/Action/IndexAction.class.php文件夹下的 URL模式 //输出URL模式//echo C('URL_MODEL'),'<br ...

  3. angular知识点总结

    angularjs angular支持的运算 逻辑运算 比较运算 三目运算 调用字符串对象的成员方法 使用直接变量表示法创建对象 使用数组 (不可以)new var (不可以)调用全局es javas ...

  4. tomcat跨域(亲测可用)

    首先下载cors-filter-2.5.jar(版本不要求)和java-property-utils-1.9.1 1.把这两个jar包放在tomcat的lib下. 2.在conf文件夹下找到web.x ...

  5. mybatis组合实体查询

    mybatis组合实体查询 <resultMap id="wxIndexMap" type="com.o2o.common.model.wxuntity.WxInd ...

  6. python解释器安装

    1. 下载安装包 1   2 https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi    # 2.7安装包   https: ...

  7. ubuntu 搭建django 环境

    ubuntu 默认安装了 python2.7 . 安装django apt install python-django: 安装mysql apt install mysql-server*  *代表版 ...

  8. Python语言、编译解释、动态库静态库、编译过程、头文件

    学习Python这门语言首先要了解 什么是编译与解释,什么是连接,什么是动态库与静态库, 什么是编译: 编译就是先把高级语言设计的程序翻译成二进制的机器语言,然后CPU直接执行机器码就可以了.一把翻译 ...

  9. 兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面

    // JavaScript Document// 加入收藏 < a onclick="AddFavorite(window.location,document.title)" ...

  10. mysql 存储引擎介绍

    一  存储引擎解释 首先确定一点,存储引擎的概念是MySQL里面才有的,不是所有的关系型数据库都有存储引擎这个概念,后面我们还会说,但是现在要确定这一点. 在讲清楚什么是存储引擎之前,我们先来个比喻, ...