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. Mapreduce的序列化和流量统计程序开发

    一.Hadoop数据序列化的数据类型 Java数据类型 => Hadoop数据类型 int IntWritable float FloatWritable long LongWritable d ...

  2. bootstrap_开始

    bootstrap 一个移动设备优先 UI 库,底层是用 less 写的,依赖于 jQuery. 面试点: bootstrap 的所有盒子都是怪异盒子模型(box-sizing: border-box ...

  3. Flutter: X Android license status unknown

    Flutter 环境检测问题 资料 windows cmd C:\Users\ajanuw>flutter doctor -v [√] Flutter (Channel stable, v1.0 ...

  4. 报文分析4、TCP协议的头结构

    TCP协议的头结构 来源端口(2字节) 目的端口(2字节) 序号(4字节) 确认序号(4字节) 头长度(4位) 保留(6位) URG ACK PSH RST SYN PIN 窗口大小(2字节) 校验和 ...

  5. SHA256的总结与Go实现

    SHA256在线验证链接:SHA256 online hash function My Golang github源码 :https://github.com/kumataahh/Golang-too ...

  6. 关于Mysql6.0+的时区错乱问题

    如果使用mysql6.0+的JDBC驱动版本的时候,有时候会出现程序时间与数据库时间相差很多个小时; 1.如果以北京时间为例,相差8个小时的情况一般是你在连接jdbc的url中没有标明system_t ...

  7. ide phpStorm使用git的命令行工具

    1.点击phpStorm左下角,点击terminal 2.发现是windows自带的cmd.exe,可以将其改为git的sh.exe 3.打开设置(File -> Settings -> ...

  8. 《ABCD组团队》第二次作业

    ABCD组:二手车价格预测系统 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.c ...

  9. Autofac之依赖注入

    这里主要学习一下Autofac的依赖注入方式 默认构造函数注入 class A { public B _b; public A() { } public A(B b) { this._b = b; } ...

  10. Exp3 免杀原理与实践 20164320 王浩

    一.实验内容 1.1 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),veil-evasion(0.5分),加壳工具(0.5分),使用shellcode编程( ...