<!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. 【多线程】-ThreadPool线程池

    ThreadPool介绍: Thread类是一个静态类,所有不存在实例化构造函数操作,直接可以调用其内所存在的方法. 微软官网给出的解释: 提供一个线程池,该线程池可用于执行任务.发送工作项.处理异步 ...

  2. sql中having、group by用法及常用聚合函数

    having是用在聚合函数的用法.当我们在用聚合函数的时候,一般都要用到GROUP BY 先进行分组,然后再进行聚合函数的运算.运算完后就要用到HAVING 的用法了,就是进行判断了. 注意:sele ...

  3. C语言检查ip是否合法

    在工作当中我们经常会遇到这种问题:判断一个输入的字符串是否为合法的IP地址,下面是一个测试小程序: #include <stdio.h> #include <string.h> ...

  4. Java线程的中断(Interruption)

    任务和线程的启动很容易.在大多数时候,我们都会让它们运行直到结束,或者让它们自行停止.然而,有时候我们希望提前结束任务或线程,或许是因为用户取消了操作,或者应用程序需要被快速关闭. 要使任务和线程能安 ...

  5. app后端设计(5)-- 表情的处理

    在app的应用中,文字中夹带表情是个很常见,那么,在后台处理表情的时间,我遇到过下面两个问题: 1. 表情在mysql的存储. 表情的utf8编码,有时是有4个字节的,所以在一般的utf编码是没法存储 ...

  6. 玩转Spring MVC(二)----MVC框架

    早期程序员在编写代码时是没有一个规范的,系统的业务逻辑和数据库的访问时混合在一起的,不仅增加了大量的重复工作,而且增加了后期维护的难度. 后来,人们逐渐发现某些通用的功能是可以单独的封装起来的,这样就 ...

  7. HSLA色相饱和透明度

    H:Hue(色调),取值为:0 - 360.将色相值想成一个圆环中的度数,随着在圆环上移动,得到不同的颜色. S:Saturation(饱和度),取值为:0.0% - 100.0%.数值越低(降低饱和 ...

  8. 用 150 行 Python 代码写的量子计算模拟器

    简评:让你更轻松地明白,量子计算机如何遵循线性代数计算的. 这是个 GItHub 项目,可以简单了解一下. qusim.py 是一个多量子位的量子计算机模拟器(玩具?),用 150 行的 python ...

  9. Python logger /logging

    # !/user/bin/python # -*- coding: utf-8 -*- ''' subprocess : 需要在linux平台上测试 shell logging ''' import ...

  10. ATM机

    ATM 要求 示例代码: https://github.com/triaquae/py_training/tree/master/sample_code/day5-atm