mask遮罩蒙版效果
来看一下效果图：
这是两张原图：
遮罩层图像 注意，白色区域为透明状态
 
要展示的图像
使用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遮罩蒙版效果 分栏效果的更多相关文章

  1. [Swift通天遁地]八、媒体与动画-(14)使用TextKit快速实现文章的分栏效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. CSS实现各类分栏布局

    在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...

  3. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  4. 特殊形状图片之遮罩蒙版CSS3-Mask效果

    前不久做了一个项目,需要一个小效果,就是获取用户头像以心形的形状展现在页面上,开始小五想的实现方式是canvas画图或CSS3的clip(剪切),发现都不理想,和设计稿里的图形美观度相差太大,而且实现 ...

  5. CSS遮罩效果和毛玻璃效果

    前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: ...

  6. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  7. 纯CSS兑现侧边栏/分栏高度自动相等(转)

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...

  8. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  9. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

随机推荐

  1. 初窥Java之六

    一.二维数组 1.动态创建 数组中元素类型[] 数组名 = new 数组中元素类型[]; 例如:int[][] arr = new int[二维数组的长度][一维数组的长度]: Int[][] arr ...

  2. webpack报错需要合适的loader

    以前做vue项目都好好的,最近做react,公共配置感觉加个jsx就可以了吧,然而不是这样的. 一.问题描述 You may need an appropriate loader to handle ...

  3. line-height:1.5和line-height:150%的区别

    1. 给你个数,孩子自己算吧  line-height:1.5 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height ...

  4. js小笔记

    1.let ,const,var 区别 let:块级作用域,if,for,用完就不存在了. const:用来定义常量. var: 声明的变量在它所声明的整个函数都是可见的. 2.==和===的区别 1 ...

  5. C_使用clock（）函数获取程序执行时间

    clock():捕捉从程序开始运行到clock()被调用时所耗费的时间.这个时间单位是clock tick ,即“时钟打点”. 常数CLK_TCK:机器时钟每秒所走的时钟打点数. #include & ...

  6. 26 Arcpy跳坑系列——ExportToPNG

    最近在学习Arcpy的时候,还真是遇到了一个磨人的小妖精,我本来是想得到一个透明背景的png图的,根据官方的帮助文档, https://desktop.arcgis.com/zh-cn/arcmap/ ...

  7. oracle根据身份证号码 计算年龄、性别

    一.Oracle根据身份证判断性别: 女生身份证: 431382198103246985 男生身份证: 150921197208173492 SQL语句如下:   select decode(mod ...

  8. swust oj 981

    统计利用二叉树存储的森林中树的棵数 1000(ms) 10000(kb) 2919 / 5436 普通树及其构成的森林均可转换成相应的二叉树,反之亦然.故而可以根据相应的转换方法去统计某一二叉树对应的 ...

  9. 学习虚拟机时Vbox提示硬件加速不可用时应该怎么办?

    也不知大家在安装或使用虚拟机时有没有出现过这样的现象?Vbox提示硬件加速不可用? 在学习Java和安装虚拟机时,自己的电脑上出现Vbox提示Vt-x硬件加速不可用,但后也知道了方法怎么弄! 方法及步 ...

  10. 扫毒>>观后感

    观后感 中学时期,甚至在小学时期,那个很懵懂的年龄, 看了什么电影,去了哪里,都要写观后感. 那个时候觉得观后感很玄学,为啥看的电影都一样,去的地方都一样, 为啥人家的观后感貌似说的真的有那么点道理, ...