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. redis初步入门(1)

    一.redis是一款高性能NOSQL系列的非关系型的数据库,其是用C语言开发的一个开源高性能键值对(key-value)数据库. 二.redis的应用场景 1.缓存(数据查询.短连接.新闻内容.商品内 ...

  2. C# ref与out关键字解析

    简介:ref和out是C#开发中经常使用的关键字,所以作为一个.NET开发,必须知道如何使用这两个关键字. 1.相同点 ref和out都是按地址传递,使用后都将改变原来参数的数值. 2.ref关键字 ...

  3. ISP PIPLINE (六) 3A 综述

    前言: 上一篇文章: ISP PIPLINE (五) Denoise 下一篇文章: (1)3A定义包括什么 Iris:自动光圈,根据环境自动调节光圈. 既然讲到光圈,就先看一下光圈是什么,以及它如何影 ...

  4. LOJ.2865.[IOI2018]狼人(Kruskal重构树 主席树)

    LOJ 洛谷 这题不就是Peaks(加强版)或者归程么..这算是\(IOI2018\)撞上\(NOI2018\)的题了? \(Kruskal\)重构树(具体是所有点按从小到大/从大到小的顺序,依次加入 ...

  5. JavaScript 常见错误

    1. 严格缩进 JavaScript 会自动添加句末的分号,导致一些难以察觉的错误 return { key: value }; // 相当于 return; { key: value }; 2. 括 ...

  6. vue-cli 脚手架 Command Line Interface

    mac sudo npm install -g nrm sudo npm config -g set unsafe-perm sudo npm install webpack@3.0.0 -g sud ...

  7. pheatmap, gplots heatmap.2和ggplot2 geom_tile实现数据聚类和热图plot

    主要步骤 pheatmap 数据处理成矩阵形式,给行名列名 用pheatmap画热图(pheatmap函数内部用hclustfun 进行聚类) ggplot2 数据处理成矩阵形式,给行名列名 hclu ...

  8. ubuntu重复登录问题

    第一次遇到: 昨天好不容易装好了驱动,紧接着装了CUDA,cuDNN,Anaconda,VSCode等等.然后安装pytorch的时候遇到了下载的问题,后来也算搞定了.但是在更换了显示器后重启(好像是 ...

  9. mysql 5.7.21 解压版安装配置方法图文教程

    引用:https://www.jb51.net/article/140951.htm 1.首先,你要下载MySQL解压版,下载地址,图解: 2.解压安装包,根据自己的喜好选择路径,我选择的路径是C:\ ...

  10. DjangoRestFramework 学习之restful规范 APIview 解析器组件 Postman等

    DjangoRestFramework学习一之restful规范.APIview.解析器组件.Postman等 本节目录 一 预备知识 二 restful规范 三 DRF的APIView和解析器组件 ...