- mask 遮罩
<head>
...
<style type="text/css">
img.test {
-webkit-mask-image:url('img/tree_clear.png');
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 600px 960px;
-webkit-mask-position: 150px 155px;
position: absolute;//让图片demo4.jpg从文档流中脱离，不占用文档流空间
z-index: -1;//数字越小离人越远。
}
</style>
</head>
<body>
<img class="test" src="img/demo4.jpg" />
<p> 正文</p>
</body>
上面代码的效果：
大图片demo4.jpg作为背景图片（水墨画），tree_clear.png（一棵树，背景透明）作为背景的遮罩，tree_clear透明部分会被白色遮挡，
不透明部分会镂空，使得镂空出能看见demo4相应内容。
position: absolute;z-index: -1；使得图片拥有背景图片一样的效果
遮罩效果（style同上，body内容不一样）
- 分栏
<head>
<style type="text/css">
div{
width: 1000px;
column-count: 3;
column-gap: 50px;
column-rule: dotted gainsboro;
}
p{
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<p>和平，使人类处于一种更近似的高度。我们内心的辉煌梦想似乎在这个乏英雄年代显得格格不入，只能在已逝的峥嵘岁月中艳羡那些曾经高大伟岸的身影。我们也许很难企及他们在特定历史环境中创造的丰功伟绩，但是在历史的暮色里，伟人们永不佝偻的却是他们高尚的人格和崇高的理想。</p>
<p>理想，是我们为自己确定的人生最大值，只有逐渐接近理想，才能够获得更为充盈的人生。那么，我们不妨将人生的最大值确定大一些，若伟人一般置心高处，以他们一样高远的视角来关注社会，用他们一样宽阔的胸襟去容纳世界。古人曾云：“虽不能至，心向往之”尽管我们可能最终不能如伟人一般求证出这个过大的最大值，但只要你曾执着以求，你便拥有了不断进取、无限延伸的人生。只要远处的那面高扬的理想之旗仍在招展，你就不会为取得一点小成就而自我满足、停步不前；也不会因身处逆境便自我消沉、萎畏退缩；更不会因身处恶境而同流合污、自甘堕落。</p>
<p>心在高处，不是欲扫天下而不扫一屋的好高骛远，目空一切。而使一种着眼大处、大度从容、胸襟开阔的人生境界。如此，你就不会变得鼠目寸光、患得患失、蝇营狗苟。一个拥有伟人般高尚品格和宽阔胸襟的人，也许依然平凡，但绝不会平庸。就像那灯火，再微弱，只要放于高处，便能最大限度的照耀别处。</p>
<p>心在高处，不是像尼采那样自诩为太阳似的自我膨胀、自命不凡。我们并不是要去刻意追求非凡，只是想让自己的一生在与理想的无限接近中变得无限充实丰盈。如果你的理想是成为太阳，那么就像太阳那样默默地燃烧发光，而不是像闪电那样，即使是瞬间的闪烁也要伴以震耳欲聋的雷声。</p>
<p>心在高处，不是自不量力、不切实际。我们明晓得自身的能力与理想之间的差距，甚至明白我们的步伐终不可能完全覆盖现实与理想之间的距离。我们以自身的具体行动一步一步地去接近它，即使不能完全达到那至美的境地，但至少，我们最大限度的接近了它。既然没有人注定成为伟人，那么，也就没有人注定成为平庸的屈膝于现实的现实主义者。那就做一只不知疲倦地飞向太阳的玄鸟吧，尽管总难抵临，也最大限度的接近了辉煌。</p>
<p>有志者，事未必成，但，尽吾力，然后无悔。</p>
<p>在顺境里不滞留，在逆境里不消沉，在恶境里不堕落，在绝境里不绝望，正是因为自己有一颗永远置于高处的不曾沦落的心。</p>
</div>
</body>
分栏效果
以上内容参考自：
http://blog.163.com/hongshaoguoguo@126/blog/static/180469812012615114522430/
网友评论