css遮罩蒙版效果分栏效果

mask遮罩蒙版效果

来看一下效果图：

这是两张原图：

遮罩层图像

CSS3 基础知识汇总2 基本功能——遮罩蒙版效果分栏效果 - 独行冰海 - 独行冰海

注意，白色区域为透明状态

要展示的图像

使用mask之后产生的效果图

首先来解释一下遮罩、蒙版。和PS中的蒙版、Flash中的遮罩层很类似

遮罩：为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。mask便是创建这样一个遮罩层。

mask 的属性：

-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/

-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat

-webkit-mask-position:x y;

-webkit-mask-clip:border | padding | content

-webkit-mask-origin:border | padding | content

以上效果的代码实现如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> mask遮罩蒙版 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
img{-webkit-mask-image:url('2.png');}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<img src="1.jpg"/>
</body>
</html>

也可将css部分更改为渐变的蒙版样式

img{
-webkit-mask-image:-webkit-radial-gradient(50% 50%,rgba(0,0,0,0),rgba(0,0,0,1));
}

可以更改蒙版的起始位置（在上面的代码中添加如下代码）

-webkit-mask-position:70px 70px;

效果：

分栏效果

column

column-count：number；设置内容分为多少栏显示

column-width：长度单位；设置每一栏的宽度而不设定元素的宽度

column-gap:长度单位;设置多栏之间的间隔距离

column-rule:宽度，颜色;在栏与栏之间增加一条间隔线。类似border.

column-span:all/none;设置是否跨栏显示

示例源代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> column分栏效果 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
div{width:1000px;}
p{text-indent:2em;padding:0;margin:0;}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<div>
<p>和平，使人类处于一种更近似的高度。我们内心的辉煌梦想似乎在这个乏英雄年代显得格格不入，只能在已逝的峥嵘岁月中艳羡那些曾经高大伟岸的身影。我们也许很难企及他们在特定历史环境中创造的丰功伟绩，但是在历史的暮色里，伟人们永不佝偻的却是他们高尚的人格和崇高的理想。</p>
<p>理想，是我们为自己确定的人生最大值，只有逐渐接近理想，才能够获得更为充盈的人生。那么，我们不妨将人生的最大值确定大一些，若伟人一般置心高处，以他们一样高远的视角来关注社会，用他们一样宽阔的胸襟去容纳世界。古人曾云：“虽不能至，心向往之”尽管我们可能最终不能如伟人一般求证出这个过大的最大值，但只要你曾执着以求，你便拥有了不断进取、无限延伸的人生。只要远处的那面高扬的理想之旗仍在招展，你就不会为取得一点小成就而自我满足、停步不前；也不会因身处逆境便自我消沉、萎畏退缩；更不会因身处恶境而同流合污、自甘堕落。</p>
<p>心在高处，不是欲扫天下而不扫一屋的好高骛远，目空一切。而使一种着眼大处、大度从容、胸襟开阔的人生境界。如此，你就不会变得鼠目寸光、患得患失、蝇营狗苟。一个拥有伟人般高尚品格和宽阔胸襟的人，也许依然平凡，但绝不会平庸。就像那灯火，再微弱，只要放于高处，便能最大限度的照耀别处。</p>
<p>心在高处，不是像尼采那样自诩为太阳似的自我膨胀、自命不凡。我们并不是要去刻意追求非凡，只是想让自己的一生在与理想的无限接近中变得无限充实丰盈。如果你的理想是成为太阳，那么就像太阳那样默默地燃烧发光，而不是像闪电那样，即使是瞬间的闪烁也要伴以震耳欲聋的雷声。</p>
<p>心在高处，不是自不量力、不切实际。我们明晓得自身的能力与理想之间的差距，甚至明白我们的步伐终不可能完全覆盖现实与理想之间的距离。我们以自身的具体行动一步一步地去接近它，即使不能完全达到那至美的境地，但至少，我们最大限度的接近了它。既然没有人注定成为伟人，那么，也就没有人注定成为平庸的屈膝于现实的现实主义者。那就做一只不知疲倦地飞向太阳的玄鸟吧，尽管总难抵临，也最大限度的接近了辉煌。</p>
<p>有志者，事未必成，但，尽吾力，然后无悔。</p>
<p>在顺境里不滞留，在逆境里不消沉，在恶境里不堕落，在绝境里不绝望，正是因为自己有一颗永远置于高处的不曾沦落的心。</p>
</div>
</body>
</html>

分栏前的原图效果：

进行初步的分栏，分为3栏显示

即在css代码中添加如下内容：

div{width:1000px;
-webkit-column-count:3;}/*此句为新加内容*/

显示效果如下

控制栏和栏之间的宽度，创建分隔线，设置分隔线的样式和颜色

-webkit-column-gap:50px;/*控制每两个栏之间距离为50像素*/
-webkit-column-rule:5px dotted #00f;/*添加一条蓝色虚线分隔线，注意像素、样式和颜色之间均使用空格分隔开*/

显示效果如下：

css遮罩蒙版效果 分栏效果

css遮罩蒙版效果分栏效果