纯CSS3写的10个不同的酷炫图片遮罩层效果

zhanghao 2016-11-24

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果，可以欣赏一下


纯CSS3写的10个不同的酷炫图片遮罩层效果
 在线预览

下载地址

实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>纯CSS3写的10个不同的酷炫图片遮罩层效果</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />

        <!--必要样式-->
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style1.css" />


    </head>
    <body>

        <div class="main">
            <div class="view view-first">
                <img src="images/1.jpg" />
                <div class="mask">
                    <h2><a href='#'>PHP中SESSION和COOKIE基本用法</a></h2>
                    <p>在项目中我们会经常用到Session和Cookie，比如用户登录验证、记录用户浏览历史，存储购物车数据，限制用户会话有效时间等。今天我们介绍下PHP是如何操作Session和Cookie的。</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
            <div class="view view-first">
                <img src="images/2.jpg" />
                <div class="mask">
                    <h2><a href='#'>HTML5制作简单的钟表</a></h2>
                    <p>今天我们用canvas标签并配合javascript来制作一个漂亮的时钟</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
            <div class="view view-first">
                <img src="images/3.jpg" />
                <div class="mask">
                    <h2><a href='#'>jQuery拉伸搜索框</a></h2>
                    <p>今天分享一个CSS3+jQuery制作一个可伸缩功能的搜索框。</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
            <div class="view view-first">
                <img src="images/4.jpg" />
                <div class="mask">
                    <h2><a href='#'>CSS3不同背景颜色的圆角按钮</a></h2>
                    <p>今天分享下用CSS3来制作一个圆角阴影、渐变色的漂亮的按钮。</p>
                    <a href="#" class="info">Read More</a>
                </div>
            </div>
        </div>
    </body>
</html>
zhanghao

zhanghao

相关推荐

点击微信防封短链接强制使用浏览器打开页面的遮罩层最新实现方案！

相信在微信中做推广的朋友一定都遇到这种情况的、当你需要在微信中推广的时候会发现，自己的网页被微信屏蔽了，还有就是说APP的下载链接在微信中点击是无法下载的。必须要手动点击，右上角的三个点，然后选择在浏览器中打开，才可以顺利完成！虽然说这个对于我们比较了解微

cbao / 0评论 2019-12-29

微信中域名被封-页面添加遮罩层提示用户使用浏览器打开（或下载APP）

微信营销是网络经济时代企业或个人营销模式的一种。是伴随着微信的火热而兴起的一种网络营销方式。但是也正因为如此，微信官方的屏蔽封杀域名的规范的也越来越严格。商家与微信之间进行着微信防封防屏蔽和封杀较量，可以说微信在广告拦截，封杀方面几乎是苛刻的。任何有广告嫌

浪味仙 / 0评论 2019-12-24

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！要弹出层，先要用一个遮罩层挡在下面的页面，此遮罩层是全屏的，页面滚动也要有，所以设置position: fixed;

Hhjian / 0评论 2014-05-31

一个轻量级的网页遮罩层jQuery插件

使用jQuery的好处是很多人为它写一些组件，而在项目所需用到功能也都可以找到一些组件去完成。现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作，取而代之的是弹出一个遮罩层显示一个loading提示框，效果如下。其实这个需求很简单，但很多组件体

人心 / 0评论 2012-02-05

HTML5中dialog元素尝鲜

对话框是web项目中用于用户交互的重要部分，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不美观，也不能自定义样式，所以在开发的过程中，一般根据自己自己的需求造轮子或者使用第三方的。开发中的对话框形式就是位置和大小随机组合的一

攻城师 / 0评论 2019-06-28

Jquery中BlockUI的详解

BlockUI插件需要那个jQuery版本的支持？BlockUI兼容jQuery v1.2.3以上的版本。BlockUI插件的V2版本有那些变化？解除锁定的时候，用于提示信息的元素不会从DOM中移除默认的遮罩层为黑色可用的选项设置进行了统一和清理设置插件选

asdjkl / 0评论 2017-05-18

jQuery 遮罩层

<button onClick="showOverlay();" style=" width:100px; height:60px; margin:40px auto 40px auto; display:block;&

csscode / 0评论 2016-09-13

Jquery点击弹出遮罩层

<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv" />

刁连通 / 0评论 2016-05-06

转载：JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

<meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" />. <meta content="jQuer

海欣海夜 / 0评论 2015-06-29

手机端 弹出遮罩层 并且不可滑动

最近用phonegap在安卓手机中使用Html5+css3做页面，<a name="yes" data-role="button" style="display: block;font-size:16

ruanjianxiong / 0评论 2014-08-17

Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

定义一个div，设置宽高跟原网页一样，通过z-index浮在原网页上面，看上去是遮罩层的效果。弹出框的z-index比div的加1.#BgDiv{background-color:#e3e3e3; position:absolute; z-index:99

83540198 / 0评论 2014-08-01

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！要弹出层，先要用一个遮罩层挡在下面的页面，此遮罩层是全屏的，页面滚动也要有，所以设置position: fixed;

DevilPace / 0评论 2014-05-31

jQuery实现带遮罩层的消息框滑入滑出效果

}可见，重要的就是z-index:101，用来确保它在遮罩层之上，和CSS遮罩层那篇文章中提到的一样。关闭标签及其他元素的样式在这里就不一一介绍了，大家可以直接在Demo中查看到，你可以使用火狐的Firebug或Google浏览器中的开发者工具进行样式的在

Kindlecode / 0评论 2012-10-27

简单jquery遮罩层

width: 100%;height: 100%;background: #333;position: absolute;top: 0;left: 0;filter: alpha(opacity=60);-moz-opacity: 0.6;opacity:

83510998 / 0评论 2012-04-28

使用jquery的blockui插件显示弹出层

在做网站的开发过程中，可能需要使用弹出层，使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。bloc

89203856 / 0评论 2012-04-17

Jquery easyui界面单击过快js错误之临时解决方案

在使用jquery easyui的做系统应用的时候，如果界面单击操作过快的话，总会出现js错误。原因应该是ajax请求未完成，相关操作未执行，多次单击使得界面上有很多的组件初始化未完成就结束了操作。<div id="overlay"

83453065 / 0评论 2012-03-14

遮罩层div

<input type="button" style="height: 30px; width: 100px;" onClick="ShowDialog()" value="co

AnyBisks / 0评论 2012-02-23

遮罩层解决jQuery UI Dialog 内嵌iFrame拖曳缓慢问题

不知道大家使用jQuery UI Dialog 内嵌iFrame页面时候遇到拖曳延迟等问题没有，或者是对mousedown，mouseup事件触发不敏感。特别在同时弹出多个dialog非常明显。很明显问题症结所在就是iframe，所以对症下药就是要把ifr

yyzhu / 0评论 2011-09-27

ExtJs源码分析与学习—遮罩层

该类用于在加载数据时为元素做出类似于遮罩的效果。如果配置了Ext.data.Store，则可将效果与Ext.data.Store的加载达到同步，并且mask本身也会被缓存起来从而可以为其他加载复用。对于所有的元素，这个遮罩类会替换元素本身的Updater加

ElementW / 0评论 2011-09-06

JQuery遮罩层

<!padding : 0px ;margin : 0px ;background : #555 ;position : absolute ;Mask.load() ;}) ;var jq = _render() ;unload(jq) ;}) ;}

scjcjlu / 0评论 2011-07-26

解决applet覆盖遮罩层div的问题

当我们想用一个遮罩层div将整个页面罩住的时候，如果页面上使用了flash或者applet。那么applet会默认覆盖在div上面，无论我们在div上做什么手脚。但是如果在div的下面再套一层iframe，可以妨碍applet的默认效果，从而达到我们要的正

debbykindom / 0评论 2011-07-05

利用css 和 js 实现遮罩层

<div id="layer1" style="position:absolute; width:260px; height:115px; z-index:1; left: 50px; top: 77px; filter

liusure0 / 0评论 2011-07-01

css遮罩层与fixed

页面上经常用到遮罩层，还有IE6给body或html加固定背景图滚动条滚动时模拟fixed的absolute层不抖动。content<br />content<br />content<br />content<b

css教程 / 0评论 2011-06-30

jQuery 实现的遮罩层效果

思路： 当触发一个事件，弹出一个iframe，让这个iframe遮住后面的页面，这样后方的页面功能就会全部失效，也就可以达到一个遮罩的效果，再通过一个事件取消ifram，恢复后方页面的功能。

海欣海夜 / 0评论 2011-05-20

CSS + DIV 模拟弹出遮罩层效果

引用一般需要弹出遮罩层窗口时，大部分都会用jquery来实现，不用太多的操作，只需调用jquery里面内置的方法即可。而下面这段代码则是完全脱离jquery自己用css+div写出来的弹出遮罩层效果，在有些时侯还是可以替代jquery使用的。//这些是需要

icecoffeemzp / 0评论 2011-03-09

基于JQUERY BOOTSTRAP 最简单的loading遮罩层

&lt;div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;ma

LeoNature / 0评论 2018-10-24

JS简单实现点击按钮或文字显示遮罩层的方法

本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考，具体如下：。</html>更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript窗口操作与技巧汇总》、《JavaScript数据结构

wjsgtxy / 0评论 2017-04-27

js图片放大镜效果实现方法详解

由项目需要，原生写了个详情页图片放大镜的效果，扔上代码供学习分享，也作为日常笔记...效果如图(例子中偷偷链了张天猫的图片，希望没啥事 -。height: 200px; /* 放大图片容器的高度 此处此处是放大4倍，为200，保持和原图容器一般大，若此处为

私有云 / 0评论 2017-03-30

利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

下面给出一个例子，使用自已定义的控件来使用Plupload ，如下

CoderEight / 0评论 2017-03-15

jQuery实现可兼容IE6的遮罩功能详解

本文实例讲述了jQuery实现可兼容IE6的遮罩功能。分享给大家供大家参考，具体如下：。最精简，最强大的 jQuery 遮罩层效果。当浏览器改变大小时，遮罩层的大小会相应地改变。<div id="main"><a on

csdnwpno / 0评论 2017-09-19

jQuery遮罩层实例讲解

遮罩的目的无非让人无法操作内容，突出提示框，而提示框可参考上面的制作，z-index比遮罩层更高便可。主要问题是，如何控制提示框在浏览器居中。}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持安科网。

lrlnh / 0评论 2017-05-11

JavaScript+html5 canvas实现本地截图教程

最近有时间了解了下html5的各API，发现新浪微博的头像设置是使用canvas实现截图的，加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传《JavaScript File API文件上传预览》，更加

niehanmin / 0评论 2016-02-02

「CSS进阶」box-shadow 与 filter:drop-shadow 详解及奇技淫巧

box-shadow 在前端的 CSS 编写工作想必十分常见。但是 box-shadow 除去它的常规用法，其实还存在许多不为人知的奇技淫巧。说到 box-shadow ，首先想到的必然是它能够生成阴影，所以称之为 shaodow ，简单看看它的语法：。b

葉無聞 / 0评论 2018-11-12

jquery实现简单的遮罩层

本文实例讲解了jquery遮罩层，包括遮罩层的不同样式实现、mask实现遮罩层等，分享给大家供大家参考，具体内容如下。}二、Jquery超简单遮罩层实现代码在开发中，为了避免二次提交，遮罩层的运用越来越普遍看了很多代码，下面跟大家分享一下我认为最简单的遮罩

夜光寒 / 0评论 2019-04-29

jQuery阻止移动端遮罩层后页面滚动

$.addClass; //使网页不可滚动

xyyojl / 0评论 2017-03-15

jQuery实现遮罩层登录对话框

用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。这用方式比较灵活方便。而现在扫描二维码登录的方式也是很常见，例如QQ、微信、百度等。现在何问起推荐一个带二维码的登录弹出层，可拖动、关闭

yibawuqing / 0评论 2016-12-29

jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

本文实例讲述了jQuery实现带遮罩层效果的blockUI弹出层。分享给大家供大家参考，具体如下：。css = 弹出内容的样式，其中属性需要写成 js 的形式，如 background-color => backgroundColor. 完整实例代码

86403563 / 0评论 2016-09-14

jQuery弹出遮罩层效果完整示例

本文实例讲述了jQuery弹出遮罩层效果。分享给大家供大家参考，具体如下：。<button onClick="showOverlay();" style=" width:100px; height:60px; margi

PHP淮北PHP00网 / 0评论 2016-09-13

jQuery实现弹出带遮罩层的居中浮动窗口效果

本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果。分享给大家供大家参考，具体如下：

zxcSabrina / 0评论 2016-09-12

jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

遮罩层弹出有非常多的方法，这里只写出本人用的代码，使用jq操作dom的方法进行实现的。<input v-click="closeMask()" class="inpt_bottomb white" value=

AnneZhao / 0评论 2016-08-25

jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法

本文实例讲述了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法。分享给大家供大家参考，具体如下：。大家都知道，ArtDialog是一款非常不错的、轻量级的、基于jQuery的对话框插件，深受大家的追捧，大伙可以到一下地址进行下载

AB君 / 0评论 2016-08-06

基于CSS3和jQuery实现跟随鼠标方位的Hover特效

今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候，遮罩层会从上次鼠标滑出的方向滑入，当鼠标滑出的时候，遮罩层会跟随鼠标，从鼠标滑出的方向滑出。这是一个十分有趣的效果。我们使用无序列表来组织缩略图

81423067 / 0评论 2016-07-25

Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

#BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0

responsecool / 0评论 2019-04-26

使用jQuery制作Web页面遮罩层插件的实例教程

在网页上经常遇到需要等待很久的操作，比如导出报表等。为了预防用户点击其他操作或者多次点击同个功能，需要用遮罩层把页面或者操作区盖住，防止用户进行下一步操作，同时可以提高界面友好度，让用户知道操作正在执行。//如果message为空或者不是字符串，则用默认的

xxglh / 0评论 2016-05-26

使用jQuery制作遮罩层弹出效果的极简实例分享

客户的网站上突然需要一个遮罩弹窗效果，也可以称作暗箱之类的，具体效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见，例如：QQ空间浏览相册等。这种效果的好处就是，可以让用户聚焦到弹出的菜单中。神说，有代码的文章，应该有

handsomezsc / 0评论 2016-05-12

AngualrJS中每次$http请求时的一个遮罩层Directive

AngularJS是一款非常强大的前端MVC框架。在AngualrJS中使用$http每次向远程API发送请求，等待响应，这中间有些许的等待过程。请求的时候，弹出一个遮罩层，收到响应的时候把遮罩层隐藏。</div>显示加载的图片被包含在Dire

xpnew的技术blog / 0评论 2016-01-26

js css 实现遮罩层覆盖其他页面元素附图

<div style=" position: fixed; width: 100%; height: 100%;left: 0px; top: 0px; background-color: Black; z-index: 9999; fil

websssssss / 0评论 2019-04-24

jQuery遮罩层效果实例分析

本文实例分析了jQuery遮罩层效果。分享给大家供大家参考，具体如下：

gentlemanhua / 0评论 2016-01-14

分享两款带遮罩的jQuery弹出框

<div id="main"><a href="javascript:showBg();">点击这里查看效果</a>. important; /* 浮动对话框 */. </s

舜岳 / 0评论 2019-04-24