深圳做app网站的公司哪家好,夸克资源搜索引擎,网站内容建设需要哪些策略呢,织梦系统做的网站怎么样CSS3提供了遮罩效果#xff0c;这是以前CSS2中比较难实现的一个新特性#xff0c;配合SVG或者canvas同样也可以实现遮罩效果#xff0c;他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层#xff0c;过滤层透明度越低#xff0c;底层就显示的越多#xff0c;反…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图片遮罩延伸到元素borderpadding图片遮罩延伸到元素paddingcontent图片遮罩延伸到元素内容部分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 imagenone没有遮罩图片top图片离上边缘的距离right图片离右边缘的距离bottom图片离底边缘的距离left图片离左边缘的距离x_repeat水平方向的重复取值repeat | stretch | roundy_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-equivContent-Type contenttext/html; charsetUTF-8
meta charsetutf-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 classdemo腾讯财付通会支付会生活/div
/body/html 转载于:https://www.cnblogs.com/zhusheng2008/p/4102691.html
