<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .left{

            float: left;

        }

        .clearfix:after{

            content: '.';

            display: block;

            clear: both;

            visibility: hidden;

            height: 0;

        }

        .container{

            background-color: red;

        }

        .container .item{

            width: 180px;

            height: 150px;

            background-color: #303a40;

            border: 1px solid red;

            overflow: hidden;

            position: relative;

        }

        .container .item:hover{

            border: 1px solid green;

        }

        .container .item .text{

            display: none;

        }

        .container .item:hover .text{

            display: block;

        }

    </style>

</head>

<body>

<div class="container clearfix">

    <div class="item left">

        <div class="bg">

            <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552466288&di=2833711b147f456e54b1e555602e4694&src=http://hbimg.b0.upaiyun.com/01f13dd8fcbfcfd38bd13f92cca49a0bd8ec434b12cea-0yEhtq_fw658" style="height: 150px; width: 180px;">

        </div>

        <div class="text">

            <div style="z-index:9;  position:absolute; left:0; right:0; top:0; bottom:0; background-color: black; opacity:0.6;"></div>

            <div style="z-index:10; position:absolute; left:0; right:0; top:0; bottom:0;">1000</div>

        </div>

    </div>

</div>

</body>

</html>

HTML 练习实现遮罩层的更多相关文章

  1. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  2. 使用CSS3的box-shadow实现双透明遮罩层对话框

    box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同 ...

  3. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  4. jQuery弹出关闭遮罩层

    效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  5. 弹出页面遮罩层，以及web端和移动端阻止遮罩层的滑动。

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:a ...

  6. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  7. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  8. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  10. HTML按钮实现！！！文件上传，遮罩层

    按钮上传文件: <input type="file" /> file的意思为提交 每个游览器的显示方式都不一样哦 遮罩层:   设两个id <style type ...

随机推荐

  1. python_函数设计

    >>> def check_permission(func): def wrapper(*args,**kwargs): if kwargs.get('username')!='ad ...

  2. 传统IT公司/创业公司/互联网大公司的offer如何选择？[转载+原创]

    背景介绍: 第一家工作的公司是一家跨国外企安全公司, 骄傲的称自己不是互联网公司而是传统软件公司, 第二家公司是当下最热的知识分享社区, 创业公司. 第三家公司是挤走谷歌, 曾一度称霸中国的搜索引擎公 ...

  3. Servlet、Filter

    加载顺序是:context-param -> listener -> filter -> servlet ,而同个类型之间的实际程序调用的时候的顺序是根据对应的 mapping 的顺 ...

  4. python日期格式化操作

    1.将字符串的时间转换为时间戳 方法: a = "2013-10-10 23:40:00" #将其转换为时间数组 import time timeArray = time.strp ...

  5. Java 保留两位小数填坑

    下面直接上代码: DecimalFormat df1 = new DecimalFormat("#.00");DecimalFormat df2 = new DecimalForm ...

  6. Oracle-14:PLSQL

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- PL/SQL PL/SQL(Procedural Language):过程化sql语言! 在原本的sql语句之 ...

  7. CountDownLatch简介

    CountDownLatch是并发包中提供的一个可用于控制多个线程同时开始某动作的类,可以看做是一个计数器,计数器操作是院子操作,同时只能有一个线程去操作这个计数器.可以向CountDownLatch ...

  8. bzoj 2588 树上主席树

    主席树上树,对于每个节点,继承其父亲的,最后跑f[x]+f[y]-f[lca]-f[fa[lca]] 去重竟然要减一,我竟然不知道?? #include<cstdio> #include& ...

  9. ReentrantLock和读写锁

    在Java5.0之前,只有synchronized(内置锁)和volatile. Java5.0后引入了显示锁ReentrantLock. ReentrantLock概况 ReentrantLock是 ...

  10. eclipse中去掉py文件中烦人的黄色弹框

    eclipse中写py文件,当鼠标点击在参数上时总是出现黄线的弹框,影响人操作,感觉特别烦,如下: 解决方案: windows--preferences--hover--pydev--hover取消选 ...