要使得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. js判断页面从何种浏览器打开

    问题 有时项目需要根据不同的设备进行不同的处理,需要判断到底是哪种设备打开了项目. 移动端浏览器检测 移动终端浏览器版本信息: var browser = { versions: function ( ...

  2. 如果Laravel 报错 file_put_contents(): failed to open stream

    问题解决方法 执行命令 php artisan cache:clear 并赋予 /storage 文件夹读写权限: chmod -R 777 storage: 若在执行 php artisan cac ...

  3. winform 动态添加控件及事件

    for (int i = 0; i < 4; i++) { Button btn = new Button(); //btn.Name = dt.Rows[i]["ANDON_CONT ...

  4. 《图解HTTP》阅读笔记--第四章--HTTP状态码

    第四章.返回结果的HTTP状态码前言:状态码的职责是告诉用户服务器端描述返回的请求,以便用户判断服务器处理是否正常. 状态码由三位数字和原因短语组成,其中三位数字的首位指定了响应类别:---1xx 接 ...

  5. 使用原生js来操作对象dom的class属性

    之前一直都使用jquery来操作dom,今天想自己用原生写一些插件,却发现给dom增删class的时候,使用slice来截取className特别的麻烦,后来发现,原来原生JS本来就有提供api来对d ...

  6. Job for postfix.service failed because the control process exited with error code. See "systemctl status postfix.service" and "journalctl -xe" for details.

    这是因为防火墙或者配置文件导致,无法启动的邮件服务!! 首先关闭防火墙! 修改配置文件 vim /etc/postfix/main.cf inet_protocols = ipv4 inet_inte ...

  7. java 的开发工具IDEA使用 中Debug 调试工具使用

    IDEA JetBrains(这个公司的名称翻译过来就是“大脑喷射?”) 公司的宣传语是这么说的:Develop with pleasure!(带着快乐开发!)   话不多说 开始debug   1, ...

  8. [ZJOI2018]历史(LCT)

    这篇还发了洛谷题解 [Luogu4338] [BZOJ5212] 题解 题意 给出一棵树,给定每一个点的 \(access\) 次数,计算轻重链切换次数的最大值,带修改. 先考虑不带修改怎么做 假设 ...

  9. Linux中apache服务

    httpd访问控制生成共享文件vim var/www/html/cq/index.html编辑配置文件 vim /etc/httpd/conf/httpd.conf<Directory &quo ...

  10. String转不同type的类对象

    import org.springframework.beans.SimpleTypeConverter; private Object deserializeValue(Class<?> ...