css特效:css裁剪和css遮罩

CSS教程

css裁剪(css clip)&css遮罩(css mask)

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;
}

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年10月12日

Previous Story

CSS教程

css定位:子元素外边距

CSS子元素外边距:使用CSS定位的时候遇到问题就是子元素的外边距达不到预期,导致外间距显示的很奇怪,学习如何让子元素外边距显示正确。

...

Next Story

CSS教程

网页设计师必备CSS样式库:Normalize.css

Normalize.css:网页设计师必备CSS样式库重置样式达到规范化,需要的原因是浏览器通常会用某些元素的默认样式,他们所谓的,不同浏览器的用户代理样式表可能会有所不同。

...