遮罩效果 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>

  

转载于:https://www.cnblogs.com/zhusheng2008/p/4102691.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/376467.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

调试九法(第1次阅读)

阅读时间&#xff1a; 2017年4月19日 --- 2017年4月22日 第一次看到这本书的时候&#xff0c;是在网上看到它被评论得十分优秀&#xff0c;只要掌握了书中的方法&#xff0c;就能找到所有的BUG。我就是这样被吸引过来的。 因为是调试9法&#xff0c;所以总共讲了调试的时候注意…

Oracle11g密码区分大小写导致database link无法连接

Oracle11g的密码默认是区分大小写的&#xff0c;该特性通过初始化参数sec_case_sensitive_logon控制&#xff0c;默认TRUE表示区分大小写。但是Oracle11g之前的版本密码都是不区分大小写的&#xff0c;所以在Oracle10g等以前版本创建到Oracle11g的database link时&#xff0c;可…

OC-深浅复制

【OC学习-26】对象的浅拷贝和深拷贝——关键在于属性是否可被拷贝 对象的拷贝分为浅拷贝和深拷贝&#xff0c;浅拷贝就是只拷贝对象&#xff0c;但是属性不拷贝&#xff0c;拷贝出来的对象和原来的对象共用属性&#xff0c;即指向同一个属性地址。深拷贝则相当于不仅拷贝了一个…

计算机科学导论(第一次阅读)

时间&#xff1a; 2017年4月22日----2017年4月26 这是一本计算机入门书籍&#xff0c;粗略地描述了计算机各个方面的内容。当然对于一些十分复杂的知识&#xff0c;也仅仅是大概描述了这方面知识的一些了解知识。

配置SQLServer,允许远程连接

需要别人远程你的数据库&#xff0c;首先需要的是在一个局域网内&#xff0c;或者连接的是同一个路由器&#xff0c;接下来就是具体步骤&#xff1a; &#xff08;一&#xff09;首先是要检查SQLServer数据库服务器中是否允许远程链接。其具体操作为&#xff1a; &#xff08;1…

弹出打开/保存文件对话框 选择文件夹对话框

打开/保存文件对话框: CFileDialog::CFileDialog(BOOL bOpenFileDialog, //为TRUE则显示打开对话框&#xff0c;为FALSE则显示保存对话文件对话框LPCTSTR lpszDefExt NULL, //默认的文件扩展名LPCTSTR lpszFileName NULL, //默认的文件名DWORD dwFlags OFN_HIDEREADONLY | O…

SharePoint 2013的100个新功能之网站管理(一)

一&#xff1a;设置盘 网站操作现在被替换为新的&#xff08;设置&#xff09;盘子。一些新的操作像添加一个应用、添加一个页面或设计管理器被添加而像创建网站则从菜单中移除了。 二&#xff1a;移除以其他用户身份登录 在SharePoint 2013中&#xff0c;从用户欢迎菜单中移除…

160 - 13 badboy

偷懒了很久也是时候要继续开始学习了。 环境&#xff1a; windows xp sp3 工具&#xff1a; VB Decompiler v8.3 这次是个vb文件&#xff0c;所以尝试一下用这个的感觉。 打开文件之后发现有两个CrackMe选择&#xff0c;分别是1.0版本和2.0版本。 打开vb decompiler&#…

VBS操作剪切板

VBS操作剪切板 设置剪切板的内容 Dim Form, TextBox Set Form CreateObject("Forms.Form.1") Set TextBox Form.Controls.Add("Forms.TextBox.1").Object TextBox.MultiLine True TextBox.Text "忘记了&#xff0c;喜欢一个人的感觉" TextBo…

MVN生成java项目

mvn archetype:create -DgroupIdcom.mycompany.app -DartifactIdmyWeb -DarchetypeArtifactIdmaven-archetype-webapp 转载于:https://www.cnblogs.com/alaricblog/p/3278239.html

160 - 14 bjanes.1

环境&#xff1a; window xp sp3 工具&#xff1a; ollydbg &#xff0c;exeinfo pe 拿到程序后&#xff0c;查壳。显示是无壳的VB程序 用之前用的VB decompiler载入&#xff0c;没找到有用的东西&#xff0c;还是用回了OD。 OD载入&#xff0c;运行起来。输入“GNUBD”然后点…

小结C++中一些自带的好用东西

STL部分 <set>/<multiset> 支持插入一个元素&#xff0c;删除指定key值的元素&#xff0c;查找指定key值的元素&#xff0c;返回最大/小值&#xff0c;找前驱&#xff0c;找后继&#xff0c;返回指定key值的相同元素个数。 部分代替平衡树中一些操作。不能updata或…

160 - 15 blaster99.exe

环境&#xff1a; windows xp sp 3 工具&#xff1a; Ollydbg 和 exeinfo pe 查壳&#xff0c;还是无壳的vb程序。 打开&#xff0c;有一个nag窗口&#xff0c;点击”确认”的话才会弹出输入serial的窗口&#xff0c;点“取消”的话会关闭程序 OD载入&#xff0c;运行到弹出n…

Freemarker宏和函数的用法和区别

1.宏&#xff08;macro&#xff09;写法&#xff1a;<#macro page url page maskSize5> <#if (number pages)><li><a href"javascript:void(0);">下一页</a></li><li><a href"javascript:void(0);">尾…

聚类算法初探(八)数据尺度化问题

文中尺度化的一些具体公式可参见 http://blog.csdn.net/itplus/article/details/10088101 其他相关链接 引言 预备知识 直接聚类法 K-means DBSCAN OPTICS 聚类分析的效果评测 作者: peghoty 出处: http://blog.csdn.net/itplus/article/details/10484553 欢迎转载/分享, 但请…

160 - 16 bjanes.2

环境&#xff1a; windows xp sp3 工具&#xff1a; bjanes.2&#xff0c;HashCalc 这个和14题是一样的&#xff0c;看名字就发现都是2.0A&#xff0c;然后用HashCalc来计算一下MD5&#xff0c;发现它们的值是相同的。 如果没猜错&#xff0c;应该就是在14题是被放错题了。

HDU 1269

很水的TARJAN求强联通图的问题。 #include <iostream> #include <cstdio> #include <cstring> #include <algorithm>using namespace std; const int N10010; const int M100010; int head[N],dfn[N],low[N],stack[N],st; struct Edge{int u,v;int nxt…

maven库文件所在目录

C:\Documents and Settings\jgzhang2\.m2\repository转载于:https://www.cnblogs.com/yipihema/p/3289140.html

imul和mul的计算

imul是把操作数符号也算上的&#xff1a; 设 AL 0B4H BL 11H 执行 imul BL 后&#xff1a;AL 0FAF4 原因&#xff1a; imul是把符号也算上的&#xff0c;所以AL是某个数的补码&#xff0c;故得AL -4C -76D&#xff0c;而BL 17D 是正数&#xff0c;相乘得-1292&#x…

【待完善】make: command not found,以及libtool.m4 and ltmain.sh have a version mismatch问题的解决方案...

之前为了使用一个库&#xff0c;都是去下载源码&#xff0c;然后根据开发者提供的README手动用GCC编译&#xff0c;一直不能使用Makefile感觉很蛋痛&#xff0c;比如最近使用的ZThread 还是怪自己以前过于依赖IDE 最近发现用Cygwin就可以使用诸如./configure, make这样的命令&a…