最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

css特效:css裁剪和css遮罩

CSS学习系列 林雍岷 150浏览

css裁剪:英文css clip,该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。

css遮罩:英文css mask,属性mask允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。除了IE和Edge浏览器不支持,Firefox,Chrome以及移动端等都已经全线支持,其实际应用价值已不可同日而语。尤其Firefox浏览器,从版本55开始,已经全面支持了CSS3 mask属性。

1、background-clip:border-box;
border-box:将允许背景在边界下扩展。

2、background-clip:padding-box;
padding-box:将允许背景扩展到边框的内部边缘。

3、background-clip:contont-box
contont-box: 将剪辑的背景内容的边缘,所以它不受任何margin或padding影响。

4、background-clip:text;
背景在文本中被剪切或被绘制。

masking

看到或者看不到通过使用透明效果实现:

alpha
luminance

img{
max-width98%;
height:auto;
-webkit-mask:url(images/mask-1.jpg) luminance;
mask:url(images/mask-1.jpg) luminance;

-webkit-mask:url(images/mask-2.png) center center no-repeat;
mask:url(images/mask-2.jpg) center center no-repeat;;
}

注意mask图片要选用纯色的;

img{
max-width:90%;
height:auto;
mask:url(#masking)
}

alpha

img{
max-width:90%;
height:auto;
-webkit-mask:url(images/mask-2.jpg) alpha center center / 30% no-repeat content-box;
}

转载请注明:林雍岷 » css特效:css裁剪和css遮罩