遮罩效果 css3
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的更多相关文章
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- css3系列之text-shadow 浮雕效果，镂空效果，荧光效果，遮罩效果
text-shadow 其实这东西,跟 box-shadow 差不多,没啥好说的不懂的话,点这里→ css3系列之详解box-shadow . 它只有 四个参数 x(第一个值设置x位置) y(第 ...
- SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...
- 【原】使用Xfermode正确的绘制出遮罩效果
以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...
- ext.ajax.request请求时带有遮罩效果
ajax请求时有时需要操作大量的数据,反应有时会很慢,这时我们想要来一个遮罩效果,具体步骤如下 1.定义一个遮罩 var myMask = new Ext.LoadMask(Ext.getBody() ...
- jquery制作弹出层带遮罩效果，点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- 扩展easyUI tab控件，添加加载遮罩效果
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...
- js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...
- IOS开发UI篇--使用CAShapeLayer实现复杂的View的遮罩效果
一.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者.服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定 ...
随机推荐
- ZeroMQ作者于昨天下午宣布选择安乐死
… printf("goodbye, world !");
- 关于shared pool的深入探讨(二)【转载】
关于shared pool的深入探讨(二) 作者:eygle |English [转载时请标明出处和作者信息]|[恩墨学院 OCM培训传DBA成功之道]链接:http://www.eygle.co ...
- 转：用unix socket加速php-fpm、mysql、redis的连接
图虫的服务器长期是单机运行.估计除了mysql之外,php-fpm和redis还可以在单机上共存很长时间.(多说服务器早就达成了单机每日2000万+动态请求,所以我对单机搞定图虫的大流量非常乐观) 如 ...
- samba、nginx服务
一.部署samba Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成,Samba主要用于Linux或UNIX和Windows系统之间的文件共享. SMB( ...
- change the color of a disabled TEdit?
change the color of a disabled TEdit? Author: P. Below Category: VCL {Question:How can I change the ...
- linux 搭建 nexus maven私服仓储
一.下载 1.创建下载软件包目录 mkdir /home/install 2.在/home/install下载nexus包,或者将下载好的nexus压缩包上传至/home/install wget ...
- Django内置Admin解析
Django 内置的admin是对于model中对应的数据表进行增删改查提供的组建 一.Django admin的内部依赖: 依赖的app django.contrib.auth django.con ...
- [pixhawk笔记]2-飞行模式
本文翻译自px4官方开发文档:https://dev.px4.io/en/concept/flight_modes.html ,有不对之处,敬请指正. pixhawk的飞行模式如下: MANUAL( ...
- tesseract 3.05 release 编译
tesseract 3.05 release版本的对应配置好的vs2015工程.偷懒必备,毕竟依赖那么多库,环境配置还是要费点事的.https://github.com/peirick/VS2015_ ...
- MySQL性能调优思路
1.MySQL性能调优思路 如果一台服务器出现长时间负载过高 /周期性负载过大,或偶尔卡住如何来处理? 是周期性的变化还是偶尔问题?是服务器整体性能的问题, 还是某单条语句的问题? 具体到单条语句, ...