蒙版：就是在图片上添加一个图层，用于美化页面，增加页面的可读性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            overflow: hidden;
            position: relative;
            margin: auto;
        }
        div p{
            display: block;
            width: 300px;
            height:100px;
            background: rgba(0,0,0,.4);
            bottom: 20px;
            left: 0;
            position: absolute;

        }
        div p:hover{
            bottom: -30px;
            color: black;
        }

    </style>
</head>
<body>
<div>
    <img src="图片路径" alt="#"/>
    <p>蒙版</p>
</div>
</body>
</html>

CSS蒙版的更多相关文章

  1. 浅谈css蒙版效果

    我们进网站浏览时经常看到当鼠标悬浮在图片上或者某一个地方时,会出现一层朦胧现象覆盖着悬浮位置,简单的理解为“蒙版效果”.下面简单列举实现过程: HTML: CSS:

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. html+css图片下弹出蒙版

    鼠标移入时弹出蒙版!!! html<!DOCTYPE html<html lang="en"<head> <meta charset="UT ...

  4. 黑色遮罩引导蒙版 CSS实现方式

    一.微云的实现 网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的. 然后上周五我去微云转悠的时候,也看到了引导层 ...

  5. css遮罩蒙版效果 分栏效果

    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态   要展示的图像 使用mask之后产生的效果图   首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...

  6. css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  7. 兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]

    整个页面变暗的蒙版效果,带有半透明边框的弹窗,用在网站里一定很酷. 最初见与奢饰品购物网站YMALL,后边研究了下,自己做了这个实例. 技术要点:css中几种透明样式的使用.不同的样式在不同的浏览器中 ...

  8. CSS 中蒙版相关设置二三事

    写 蒙版 时会使用透明度,第一反应会使用 opacity 但这个会使子元素继承,蒙版内还有内容会被影响,从而会设置 background 属性的 rgba 值. 需要注意的是 rgba 和 gba 颜 ...

  9. html/css实现阴影蒙版覆盖原网页并显示浮框的功能

    在提供用户修改资料/密码等功能的时候,往往希望给用户这样的使用体验,在不跳转,不弹框的情况下完成对这些功能的操作. 这可以通过一种效果来实现,在同一页面下阴影覆盖整个当前网页并使得原网页中元素无法使用 ...

随机推荐

  1. JD-GUI on Ubuntu 13.04 64-bit

    Java Decompiler (jd-gui) is a cute little tool I like using when working in Java. Unfortunately it o ...

  2. Linux 下防火墙端口设置

    方式1:     /sbin/iptables -I INPUT -p tcp --dport 8011 -j ACCEPT  #开启8011端口      /etc/rc.d/init.d/ipta ...

  3. mysql 存储过程 动态sql例子

    proc:BEGIN ; ; ; ) DEFAULT ''; ) DEFAULT ''; ) DEFAULT '';#插入日志的表,一个活动一张表 #将局部变量转换成会话变量 #动态sql语言只接受会 ...

  4. OpenStreetMap(OSM) JMap Viewer(Java swing map)

    This article from:http://wiki.openstreetmap.org/wiki/JMapViewer JMapViewer is a java component which ...

  5. ios常用的框架（源自知乎上的回答）

    首先,学习这类开源项目的主要目的是为了实现产品汪需求,如果不是这个目的,完全可以看Explore GitHub,当前最火的开源项目都在这里,当然你需要过滤一下语言. 好了,介绍几个希望能帮助到你. 普 ...

  6. android VoiceRecognition 语音识别并打印到列表上

    package com.example.wenandroid; import java.util.ArrayList; import java.util.List; import android.ap ...

  7. DB Query Analyzer 5.04 is released, 63 articles concerned have been published

    DB Query Analyzer 5.04 is released, 63 articles concerned have been published DB QueryAnalyzer is pr ...

  8. windows编程之菜单操作

    分清几个概念 <1>"主菜单" 和 "顶层菜单" 是一个意思. <2>主菜单中的项目叫做 "弹出菜单" 或者 &qu ...

  9. JS 匿名函数 自执行

    其实就是将函数直接做为表达调用,使用括号包裹定义函数体,解析器将会以函数表达式的方式去调用定义函数. 常见格式:(function() { /* code */ })(); 解释:包围函数(funct ...

  10. Java提高学习之Object(5)

    字符串形式的表现 Q1:toString() 方法实现了什么功能?A1:toString() 方法将根据调用它的对象返回其对象的字符串形式,通常用于debug. Q2:当 toString() 方法没 ...