HTML&CSS基础-透明度opacity与filter　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>透明度</title>

        <style type="text/css">

            .box1{

                width: 200px;

                height: 200px;

                background-color: red;

                position: relative;

                z-index: 2;

                opacity: 0.5;

                filter: alpha(opacity=50);

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: yellow;

                /*开启绝对定位*/

                position: absolute;

                /*设置偏移量*/

                top: 100px;

                left: 100px;

                /*

                 *     如果定位元素的层级是一样，则下边的元素会盖住上边的，通过z-index属性可以用来设置元素的层级

                 *

                 *     可以为z-index指定一个正整数的值，该值将会作为当前元素的层级，层级越高，越优先显示

                 *

                 *  对于没有开启定位的元素不能使用z-index

                 */

                z-index: 25;

                opacity: 0.5;

                filter: alpha(opacity=50);

            }

            .box3{

                width: 200px;

                height: 200px;

                background-color: yellowgreen;

                position: absolute;

                top: 200px;

                left: 200px;

                z-index: 30;

                /**

                 *     设置元素的透明背景

                 *     opacity可以用来设置元素背景的透明，它需要一个0-1之间的值:

                 *         0:

                 *            表示完全透明

                 *         1:

                 *             表示不透明

                 *         0.5:

                 *             表示半透明

                 */

                opacity: 0.5;

                /**

                 *     opacity属性在IE8及以下的浏览器中不支持

                 *

                 *     IE8及以下的浏览器需要使用"alpha(opacity=透明度)"属性代替,其中透明度需要一个0-100之间的值:

                 *         0:

                 *             表示完全透明

                 *         100:

                 *             表示不透明

                 *        50:

                 *             表示半透明

                 *

                 *     这种方式也支持IE6,但是这种效果在IE Tester中无法测试

                 */

                filter: alpha(opacity=50);

            }

        </style>

    </head>

    <body style="height: 5000px;">

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

    </body>

</html>

二.浏览器打开以上代码渲染结果

Python序列化与反序列化-json与pickle的更多相关文章

  1. python 序列化模块之 json 和 pickle

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,支持不同程序之间的数据转换.但是只能转换简单的类型如:(列表.字典.字符串. ...

  2. Python 序列化模块（json，pickle，shelve）

    json模块 JSON (JavaScript Object Notation):是一个轻量级的数据交换格式模块,受javascript对象文本语法启发,但不属于JavaScript的子集. 常用方法 ...

  3. Python序列化和反序列化

    Python序列化和反序列化 通过将对象序列化可以将其存储在变量或者文件中,可以保存当时对象的状态,实现其生命周期的延长.并且需要时可以再次将这个对象读取出来.Python中有几个常用模块可实现这一功 ...

  4. python常用模块之json、pickle模块

    python常用模块之json.pickle模块 什么是序列化? 序列化就是把内存里的数据类型转换成字符,以便其能存储到硬盘或者通过网络进行传输,因为硬盘或网络传输时只接受bytes. 为什么要序列化 ...

  5. C#序列化及反序列化Json对象通用类JsonHelper

    当今的程序界Json大行其道.因为Json对象具有简短高效等优势,广受广大C#码农喜爱.这里发一个序列化及反序列化Json对象通用类库,希望对大家有用. public class JsonHelper ...

  6. Jackson序列化和反序列化Json数据完整示例

    Jackson序列化和反序列化Json数据 Web技术发展的今天,Json和XML已经成为了web数据的事实标准,然而这种格式化的数据手工解析又非常麻烦,软件工程界永远不缺少工具,每当有需求的时候就会 ...

  7. (推荐JsonConvert )序列化和反序列化Json

    在Json文本和.Net对象之间转换最快的方法是试用JsonSerializer. JsonSerializer通过将.Net对象属性名称映射到Json属性名称,并为其复制值,将.Net对象转换为其J ...

  8. python序列化与反序列化（json与pickle）

    在python中,序列化可以理解为将python中对象的编码格式转换为json(pickle)格式的字符串,而反序列化可以 理解为将json(pickle)格式的字符串转换为python中对象的编码格 ...

  9. python序列化与反序列化（json、pickle）-（五）

    1.什么是序列化&反序列化? 序列化:将字典.列表.类的实例对象等内容转换成一个字符串的过程. 反序列化:将一个字符串转换成字典.列表.类的实例对象等内容的过程 PS:Python中常见的数据 ...

随机推荐

  1. 当系统扩展遇到违背OO的里氏原则（LSP）的时候怎么办 ？

    先转一篇写得很好的文章:http://www.cnblogs.com/CodeGuy/archive/2012/03/26/2418803.html ========================= ...

  2. java maven项目迁移时缺失jar包 或者 maven jar包缺失时的解决方案

    这样弄完,jar包就都下载好了,就不缺失了. 从GitHub上checkout一个项目下来,导入idea后发现加载依赖奇慢无比,所以临时把网络调成FQ的代理,结果会发现idea会停止之前的下载,那怎么 ...

  3. effective c++ 笔记 (13-17)

    //---------------------------15/03/30---------------------------- //#13   以对象管理资源 { void f() { Inves ...

  4. iOSApp上下有黑边

    如图: 这种情况就是没有启动页导致的,加了启动页图片之后就不会再出现了. 设置启动页的方法: http://www.cnblogs.com/BK-12345/p/5218229.html 有的人说我加 ...

  5. chrome下的Grunt插件断点调试——基于node-inspector

    之前调试grunt插件时,都是通过人肉打log来调试.不仅效率低,而且会产生一堆无用的代码.于是简单google了下node断点调试的方法,总结了下. 借助node-inspector,我们可以通过C ...

  6. Unity利用SMSSDK实现短信验证码（附代码）

    最近一直在研究如何给app更多实用性的功能,在app进行登录或者注册时,为了方便用户更加快捷的完成登录功能,所以就决定采用短信验证码的方式进行验证登录.在学习的过程中,先使用了Mob的短信服务进行短信 ...

  7. EOS 权限管理之-权限的使用

    首先,跟大家说声抱歉,由于之前一直在准备EOS上线的一些工作,所以,很长时间没有更新内容.今天正好有时间,也想到了一些题材,就来说一下这个话题.本文完全是个人见解,如有不当之处,欢迎指出. 前提回顾: ...

  8. 猎豹CEO傅盛：95%的人碌碌无为，只是不懂这一点！

      我一直在思索,怎么才能让一家公司更快地成长?一个人怎么才能从一群人的竞争当中脱颖而出? 1. 人的四种认知状态 最近我看了一幅图,我在其上加了一个数字注脚. 这是一个人认知的四种状态——“不知道自 ...

  9. Final版本发布评论

    1.飞天小女警组做的礼物挑选小工具,相比较beta版本并没有太大的改动,新增添了“猜你喜欢”模块,在最后给出的礼物推荐下面会给出三个猜你喜欢的礼物.这样解决了推荐礼物的单一,也让礼物推荐变得更有趣了. ...

  10. HDU 2029 算菜价

    http://acm.hdu.edu.cn/showproblem.php?pid=2090 Problem Description 妈妈每天都要出去买菜,但是回来后,兜里的钱也懒得数一数,到底花了多 ...