首页 > 代码库 > 遮罩效果 css3

遮罩效果 css3

2024-08-04 09:44:41   222人阅读

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


联系
我们