<!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. Scrapy爬虫框架第四讲(Linux环境）

    下面我们来学习Selector的具体使用:(参考文档:http://scrapy-chs.readthedocs.io/zh_CN/1.0/topics/selectors.html) Selecto ...

  2. javaweb项目部署到tomcat服务器

    http://jingyan.baidu.com/album/a501d80c0c65baec630f5ef6.html?picindex=8

  3. Hexo博客搭建

    http://www.jianshu.com/p/e99ed60390a8 http://blog.csdn.net/xuezhisdc/article/details/53130328 注意点: 1 ...

  4. SVN更新失败，提示locked 怎么破

    有时在svn更新或提交代码时,会报错,让你cleanup  如果cleanup解决不了,就要删除被锁定的文件夹下的文件,然后就可以更新或提交了 怎么做呢? 1.首先在CMD中进入你工作目录被锁定的文件 ...

  5. java基础学习周计划之1--语言基础

    JAVA语言基础第一天一． 知识点:1. 认识Linux操作系统2. JAVA开发环境3. Eclipse IDE二． 关键问题(理论):1. Linux中常用命令pwd.ls.cd的作用2. 简述J ...

  6. indexer.go

    package) ; , ].DocId,:],)) :],) :], , ] ; ];]--],]) , ) )) )-b+b*d/avgDocLength)) , ;].locations[ind ...

  7. BZOJ_3831_[Poi2014]Little Bird_单调队列优化DP

    BZOJ_3831_[Poi2014]Little Bird_单调队列优化DP Description 有一排n棵树,第i棵树的高度是Di. MHY要从第一棵树到第n棵树去找他的妹子玩. 如果MHY在 ...

  8. BZOJ_3252_攻略_线段树+dfs序

    BZOJ_3252_攻略_线段树+dfs序 Description 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏.今天他得到了一款新游戏< ...

  9. java  JDK配置环境变量

    1)将下载的jdk放置到一定文件夹中,注意文件夹名不能有中文! 2)设置环境变量 a.可以在系统变量中找到path这个变量,然后将jdk下的bin的根目录添加进去 注意:一定要放在path变量值的最前 ...

  10. java基于BasicPlayer调用 播放音乐

    无聊中想想用java调用下听音乐的api.晚上很多文章用的比较老大方法了,都是用原生的代码写,而且不支持mp3格式,BasicPlayer第三方包提供了很好的api调用,简单的3行代码就可以调用mp3 ...