CSS3提供了遮罩效果，这是以前CSS2中比较难实现的一个新特性，配合SVG或者canvas同样也可以实现遮罩效果，他的效果就如下图所示:

简单的说就是在一个层上面加一个过滤层，过滤层透明度越低，底层就显示的越多，反之，底层显示越少

1. CSS3属性

CSS3中提供的新属性有(括号为跟background对应类似的属性)：

-webkit-mask-image:设置遮罩图片地址

-webkit-mask-position: 定义遮罩层的出现位置,可以取值px或百分比，也可以指定为 top left right 和bottom

像素(px)

(1)如果只指定一个值(例如-webkit-mask-position:10px)，第二个值就会被默认为'center'效果如-webkit-mask-position:10px center

(2)如果指定两个值(-webkit-mask-position:10px 10px),第一个值就是横坐标的偏移或定位，第二个值就是纵坐标的偏移或定位,px指定遮罩图片的左上角对应于影响区域的左上角，所谓影响区域就是被遮罩图片遮罩的区域,也就是遮罩图片的大小

(3)如果指定三个值，那么每个px之前必须指定一个方向(top,left,bottom,right),例如:mask-position: bottom 10px right 20px 指定了距离底部10px，距离右边20px，如果指定了3个方向，默认值为0

例如：

 mask-position: left 10px top 15px;   /* 10px, 15px */

 mask-position: left      top     ;   /*  0px,  0px */

 mask-position:      10px     15px;   /* 10px, 15px */

 mask-position: left          15px;   /*  0px, 15px */

 mask-position:      10px top     ;   /* 10px,  0px */

 mask-position: left      top 15px;   /*  0px, 15px */

 mask-position: left 10px top     ;   /* 10px,  0px */

 百分比(%)

百分比设置了遮罩图片横坐标和纵坐标的偏移百分比，注意偏移包括对遮罩原图片大小的偏移，也包括遮罩图片本身的偏移,例如-webkit-mask-position:75% 50%的偏移如图:

指定值：

top: 如果指定1或2个值则代表纵坐标0%,否则是指定距离上边的偏移量
right: 如果指定1或2个值则代表横坐标100%,否则是指定距离右边的偏移量
bottom: 如果指定1或2个值则代表纵坐标100%,否则是指定距离下边的偏移量
left: 如果指定1或2个值则代表横坐标0%,否则是指定距离左边的偏移量
center:代表50%

body { mask: url("banner.jpeg") right top }    /* 100%   0% */

body { mask: url("banner.jpeg") top center }   /*  50%   0% */

body { mask: url("banner.jpeg") center }       /*  50%  50% */

body { mask: url("banner.jpeg") bottom }       /*  50% 100% */

-webkit-mask-position-x: [ percentage | length | left | center | right ] 定义遮罩层的出现位置的横坐标
-webkit-mask-position-y: [ percentage | length | top | center | bottom ] 定义遮罩层的出现位置的纵坐标

-webkit-mask-clip: border | padding | content | text 定义图片遮罩延伸到的位置

border 图片遮罩延伸到元素border
padding 图片遮罩延伸到元素padding
content 图片遮罩延伸到元素内容部分
text 图片遮罩延伸到元素文字部分

-webkit-mask-composite 定义同一个元素上有多个图片遮罩时的相对顺序

clear 源图片和目标图片重叠的像素被清除
copy 源图片替代目标图片
source-over 源图片呈现在目标图片上
source-in 源图片和目标图片重叠的像素被源图片替代，其他像素被清除
source-out 源图片和目标图片重叠的像素被清除，源图片剩下的像素被呈现
source-atop 目标图片被呈现。只有在重叠像素在目标图片的不透明部分时，源图片被呈现。这导致源图片不起作用
destination-over 目标图片呈现在源图片上
destination-in 源图片和目标图片的重叠像素中，属于源图片的保留，其他像素被清除
destination-out 图片和目标图片的重叠像素被清除，源图片剩余的像素被展示
destination-atop 源图片的像素被展示。只有在重叠部分在目标图片的不透明时。目标图片被呈现。这导致目标图片不起作用
xor 如果源图片与目标图片都透明时，重叠像素全变为透明

例如:　　

         #demo{

                width:930px;

                height:768px;

                margin: 50px auto;

                font-size: 20px;

                font-weight: bold;

                color:red;

                background:url(back.jpg) no-repeat;

                -webkit-mask-image:url(mask1.png),url(mask2.png);

                -webkit-mask-repeat:no-repeat;

            }

mask.png为源图片，mask2为目标图片

-webkit-mask-box-image 定义图片遮罩的滚动特性.

uri 图片路径
gradient 用-webkit-gradient函数生成遮罩图（mask image）
none 没有遮罩图片
top 图片离上边缘的距离
right 图片离右边缘的距离
bottom 图片离底边缘的距离
left 图片离左边缘的距离
x_repeat 水平方向的重复，取值：repeat | stretch | round
y_repeat 垂直方向的重复，取值：repeat | stretch | round

-webkit-mask-origin 定义-webkit-mask-position值得起始位置.

padding 默认值，从padding开始计算-webkit-mask-position的值
border 从border开始计算-webkit-mask-position的值
content 从元素内容部分开始计算-webkit-mask-position的值

-webkit-mask-repeat 定义遮罩层的出现位置

repeat 遮罩图片水平、垂直方向都重复
repeat-x 遮罩图片只在水平方向重复
repeat-y 遮罩图片只在垂直方向重复
space 遮盖图像重复的次数使其可容纳在背景放置区域中，同时不经过裁剪，图像将拉开间隔以填满区域。
round 遮盖图像经过缩放，以便可放下整数个该图像
no-repeat 遮罩图片不重复

-webkit-mask-size 定义遮罩层的大小

auto 继承遮罩图的宽度和高度
contain 放大图像到最大的尺寸，同时保持原有的图像纵横比，使得宽高完全地适应背景位置区域
cover 缩放图像到最小的尺寸，同时保持原有的图像纵横比，使得宽高完全地覆盖背景位置区域
length 浮点数，后跟绝对单位符(cm, mm, in, pt, pc)或者相对单位符 (em, ex, or px)
percentage 整数，后跟百分号，百分比的值和背景位置区域有关系。

-webkit-mask-attachment: fixed | scroll 图片滚动方式 fixed 不滚的 scroll滚动

2. 配合animation:css3的animation可以实习样式的动态变化，通过设置animation可以实现探照灯效果:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="utf-8">

<title>探照灯例子</title>

<style>

body {

    font-size: 13px;

    background-color: #000;

}

.demo {

    -webkit-animation: demo-an2 5s ease-out infinite;

    border-radius: .4em;

    color: #FFFF;

    margin: 1em;

    font-size:4em;

    font-weight:bold;

    text-align: center;

    text-shadow: 1px 1px 0 #ccc;

    -webkit-mask: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 20%) -500px 0 no-repeat content;

    width: 16em;

}

@-webkit-keyframes demo-an {

to {

-webkit-mask-position:600px 0;

}

}

</style>

</head>

<body>

<div class="demo">腾讯财付通，会支付会生活</div>

</body></html>

遮罩效果 css3的更多相关文章

  1. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  2. css3系列之text-shadow 浮雕效果，镂空效果，荧光效果，遮罩效果

    text-shadow 其实这东西,跟  box-shadow 差不多,没啥好说的不懂的话,点这里→  css3系列之详解box-shadow  . 它只有 四个参数 x(第一个值设置x位置) y(第 ...

  3. SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

    接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...

  4. 【原】使用Xfermode正确的绘制出遮罩效果

    以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...

  5. ext.ajax.request请求时带有遮罩效果

    ajax请求时有时需要操作大量的数据,反应有时会很慢,这时我们想要来一个遮罩效果,具体步骤如下 1.定义一个遮罩 var myMask = new Ext.LoadMask(Ext.getBody() ...

  6. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  7. 扩展easyUI tab控件，添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

  8. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  9. IOS开发UI篇--使用CAShapeLayer实现复杂的View的遮罩效果

    一.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者.服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定 ...

随机推荐

  1. linux基础命令(2)

    1 nohup命令 如果你正在运行一个进程,而且你想在退出帐户/关闭终端之后继续运行相应的进程,可以使用这个命令,nohup就是不挂起的意思no hang up. 用法: nohup command ...

  2. 解释一下python中的//,%和**运算符

    //运算符执行地板除法(向下取整除),它会返回整除结果的整数部分 print(7//2) 这里整除后会返回3.5 同样的,执行取幂运算,ab会返回a的b次方 print(2**10) 最后,%执行取模 ...

  3. 【笔记】IntelliJ IDEA配置Hibernate

    参考:imooc:http://www.imooc.com/video/7706 1.创建Hibernate的配置文件. 将依赖包导入项目.http://blog.csdn.net/a15337525 ...

  4. 【Python】进程和线程

    多进程 多线程 ThreadLocal 进程vs线程 分布式进程 Top 学习廖老师的py官网的笔记 多任务的实现方式有三种方式: 1.多进程 2.多线程 3.多进程+多线程(这种比较复杂,实际很少采 ...

  5. Ubuntu 14.04上架IPSec+L2TP的方法

    最简单的方法是使用脚本一步一步地进行配置.我用的是philplckthun写的脚本,修改了一下获取服务器IP的方法:脚本文件. 在ubuntu下运行: sh setup.sh 配置配置完成后,服务器端 ...

  6. java鲁棒性（健壮性）

    java能检测编译和运行时的错误 java自己操作内存减少了内存出错的可能 java实现了真数组,避免了覆盖数据的可能 Java不支持指针操作,大大减少了错误发生的可能性 ... 备注: Java能运 ...

  7. C语言中 ln（以自然对数e为底） lg(以十为底) 以及logab（以a为底，b为真数）的相关知识

    总所周知,我们在高中学过对数函数,记作y=logax.下面是百度百科关于对数函数的描述: 对数的定义:一般地,如果ax=N(a>0,且a≠1),那么数x叫做以a为底N的对数,记作x=logaN, ...

  8. APPIUM API整理（python）---元素查找

    最近在学习自动化框架appium,网上找一些API相关资料整理了一下 1.find_element_by_id find_element_by_id(self, id_): Finds element ...

  9. 行列转换文本处理--awk xargs 回顾

    awk 数组回顾: 9.1 数组 举例:统计当前主机上每一个TCP连接状态以及每种连接状态的数目[非常实用] # netstat -tan | awk '/^tcp/{STATE[$NF]++}END ...

  10. java-json与js-json转化

    js中将字符串转换成json的三种方式http://www.jb51.net/article/25987.htm JAVA对象转换为JSON字符串 http://blog.163.com/zzf_fl ...