织梦二次开发,二次开发,李丕长,网站php二次开发,做网站,模板设计,jquery效果,jquery特效

当前位置: 主页 > 网友推荐 >

CSS3 : chrome/safari -webkit-mask-box-image

时间:2013-08-06 16:13作者:露馨儿 点击:
css3 新增特性 遮罩图片层。目前只支持webkit核心的浏览器 -webkit- mask这个属性的作用如果熟悉Flash的话就知道有个遮罩层的东西,也就是如果根据遮罩层的颜色的深浅来显示位于遮罩层下

 css3 新增特性 遮罩图片层。目前只支持webkit核心的浏览器

-webkit- mask这个属性的作用如果熟悉Flash的话就知道有个“遮罩层”的东西,也就是如果根据遮罩层的颜色的深浅来显示位于遮罩层下方的图像,在这里的 话,-webkit-mask是采用opacity透明度来实现遮罩的,如果透明度为1则显示,透明度为0则不显示,介于0-1之间则呈现相应的透明度

-webkit-mask也是一个复合属性,语法如下:

             -webkit-mask:attachment, clip, origin, image, repeat, composite, box-image;

 也就是说这个属性可以分解成如下的几个属性:

(1)-webkit-mask-attachment  设置遮罩图片是否随页面滚动

         【语法】:-webkit-mask-attachment:  fixed | scroll

                           fixed表示图片不随页面滚动,scroll则表示图片随页面滚动,但是很不幸没有测试成功,API上倒是 

                           提了一句说是Apple Extension,原以为是iphone上的safari才可以显示,但是用ipod测试了一下也没有看

                           到效果。还有待研究

 (2)-webkit-mask-clip   关于这个属性,safari的API也没有做太多的解释,只是说用于阐述mask的效果是否扩展到

          边框上,但是对于这个属性的值没有过多的介绍。很遗憾!

(3)-webkit-mask-origin   设置遮罩的位置 ,这个属性决定了-webkit-mask-position的起点,

          有三个值padding border  content

         【语法】-webkit-mask-origin: padding |  border  | content

                        padding ---- mask的位置从元素padding的左上角开始

                        border-------mask的位置从元素的border的左上角开始

                        content------mask的位置从元素的实际内容的左上角开始

(4)-webkit-mask-image   设置用于遮罩的图片

          【语法】-webkit-mask-image:url;

(5)-webkit-mask-repeat  设置遮罩的方式

          【语法】-webkit-mask-repeat:  stretch(默认) |  round  |  repeat

(6)-webkit-mask-composite   设置遮罩的混合模式

           【语法】-webkit-mask-composite: border(默认)  |   padding

                           border ----表示背景会延伸到边跨区域

                           padding---表示背景只会延伸到padding区域

(7)-webkit-mask-box-image  该属性的作用有点像拼图的作用,举一个例子说明。

        【语法】:-webkit-mask-box-image:url top right bottom left x-repeat y-repeat;

         【参数】:url   表示使用的图片

                        top right bottom left  分别表示的是针对url里图片的裁切位置,可以为像素(为像素时不能带px单位)和百

                        分比,而且这个属性设置和平时设置的不一样,如果top right bottom left中没有设置值的就默认为0像素

                        如果接触过CSS3里的border-image就可以比较容易的理解这个属性的用法了,但是
                        -webkit-mask-box-image这个属性的用法 其实又是有点区别的。举一个例子来描述

                        3.jpg

                        soul.png(这是一张具有透明背景的图片)

   <img src="3.jpg" style="background:red;border:1px solid red;-webkit-mask-box-image: url(soul.png) 90 90 90 90 stretch;"/>

       效果如图

                   top是指从上到下的切取,right为从右往做切取,bottom为从下往上切取,left为从左向右切取,这样就会导致四个角的部分会出现重复的部分,而不是像border-image那样分成没有重复区域的九宫格

             根 据图示,用于遮罩的图片就是以九宫格的形式来截取的,四个角top-left,top-right,bottom-left,bottom-right不 变,top、right、bottom、left四边根据设置的x-repeat,y-repeat的设置进行平铺,重复或者拉伸,中间区域()

              x-repeat y-repeat  表示的是x方向 y方向的图片呈现方式(repeat stretch round  默认为stretch)

 

 

 

.k-invalid-msg .k-warning{
-webkit-mask-box-image:none;
-webkit-mask-image:url("styles/images/searchinput.png");
-webkit-mask-size:auto 100%;
-webkit-mask-position-x:10%;

}
.k-invalid-msg .k-icon{
height: 18px;
width:18px;
background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#BCE4FF),color-stop(0.5,#3F99D2),color-stop(1,#53BFE5));
}

顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
露馨儿 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:2013-06-08 09:06 最后登录:2014-02-20 15:02
无觅相关文章插件,快速提升流量