css遮罩蒙版效果 分栏效果_メイ的博客-程序员秘密

mask遮罩蒙版效果
来看一下效果图:
这是两张原图:
遮罩层图像CSS3 基础知识汇总2 基本功能——遮罩蒙版效果 分栏效果 - 独行冰海 - 独行冰海 注意,白色区域为透明状态
 
要展示的图像CSS3 基础知识汇总2 基本功能——遮罩蒙版效果 分栏效果 - 独行冰海 - 独行冰海
   
使用mask之后产生的效果图
CSS3 基础知识汇总2 基本功能——遮罩蒙版效果 分栏效果 - 独行冰海 - 独行冰海
 
 
首先来解释一下遮罩、蒙版。和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));
}

CSS3 基础知识汇总2 基本功能——遮罩蒙版效果 分栏效果 - 独行冰海 - 独行冰海
可以更改蒙版的起始位置(在上面的代码中添加如下代码)

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

效果:
CSS3 基础知识汇总2 基本功能——遮罩蒙版效果 分栏效果 - 独行冰海 - 独行冰海
分栏效果
 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>

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

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

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

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

显示效果如下
CSS3 基础知识汇总2 基本功能——遮罩蒙版效果 分栏效果 - 独行冰海 - 独行冰海
 控制栏和栏之间的宽度,创建分隔线,设置分隔线的样式和颜色

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

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

转载于:https://www.cnblogs.com/hanqishihu/p/7048734.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30785593/article/details/97337437

智能推荐

如何让网页字体元素变得可以选择JS的 onselectstart, style的 user-select:none_叫我福建的博客-程序员秘密

问题描述:如何让网页字体元素变得可以选择。其渲染出来的代码是这样的:问题解决:这个代码就是用 JS 把 onselectstart 变成 return true 外加style 里面的 user-select: 不见再严一点, 把 unselectable 里面的 on 变成 off所以JS 如下, 因为有大量class 为 practice-item 元素let practice_item = document.getElementsByClassName("practice-ite

linux虚拟机无法联网 虚拟机 connect: Network is unreachable问题_hanpenghu的博客-程序员秘密

其实我用的是net连接   配置虚拟机(linux CentOS 7 64bit)时,调用ping命令并不能正常执行,其反馈为&quot;connect: Network is unreachable&quot;。而调用ifconfig -a命令后,发现并没有eth0网卡,只有一个ens33和一个lo。解决方案:1.编辑/etc/sysconfig/network-script...

html_a1314521b的博客-程序员秘密

HTML,主讲Hector一、HTML简介1.HTML是什么?HTML:hyper text markup language超文本标记(标签)语言由各种标签组成,用来制作网页,告诉浏览器该如何显示页面2.作用制作网页,控制网页和内容的显示插入图片、音乐、视频、动画等多媒体通过链接来检索信息使用表单获取用户的信息,实现交互3.版本W3C:world wide web conso...

Delta机器人:运动学正反解分析_花洛兮灬的博客-程序员秘密_delta机构

Delta机器人:运动学正反解分析一、Delta机构简介Delta机构是并联机构中的一种典型机构,起原始结构如图1所示。Delta机构由R.Clavel 博士在 1985年发明,是现在并联机器人中使用最多的一种,具备了并联机构所特有的优点,负载能力强、效率高、末端执行器精度高、运动惯性小,可以高速稳定运动等。因此在机器人领域获得了越来越广泛的应用。以实现高速、精准、高效的运动。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n

STM32H7A3 ADC+DMA使用问题_MC_J的博客-程序员秘密

解决STM32H7A3使用过程中遇到的一些奇怪的问题,并提供参考

Android 使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现伸缩头部和菜单悬停效果_唐衡三的博客-程序员秘密

Android 原生控件实现伸缩头部和菜单悬停效果 &lt;android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"&gt; &lt;android.support.design.widget.AppBarLayout

随便推点

win10安装caffe-windows+python35,GPU\CPU_xddwz的博客-程序员秘密

目前caffe-windows对python3只支持python35,其他版本没有尝试,建议使用anaconda+python35安装。另外需安装vs2015,安装方法百度。需先安装CUDA和CuDNN,CUDA的安装方法可以参考我的贴子:https://mp.csdn.net/postedit/86525181安装好python35之后,检查电脑是否安装有cmake,cmake的版本要高于3...

LeetCode刷题 344.反转字符串__深海凉_的博客-程序员秘密_本题目要求将输入字符串翻转

题目要求:编写一个函数,其作用是将输入的字符串反转过来。输入字符串以字符数组 char[] 的形式给出。不要给另外的数组分配额外的空间,你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。你可以假设数组中的所有字符都是 ASCII 码表中的可打印字符。分析:这道题思路很简单,方法的话,可以使用库函数reverse();也可以使用双指针,即对撞指针!//库函数void...

mysql如何将data文件直接导入数据库文件_seesun2012的博客-程序员秘密_mysql导入.db文件

一、确定data目录在哪里(MySQL的数据存放路径)1.默认路径:C:\ProgramData\MySQL\MySQL Server 5.6\data(注意:ProgramData文件夹是隐藏的,需要先显示出来)2.在链接工具中使用命令:show global variables like &amp;amp;amp;amp;quot;%datadir%&amp;amp;amp;amp;quot;;如图:二、拷贝数据库:需要拷贝的文件,如:my_test_db文件...

【区块链】Merkle,布隆过滤器,日志小结_Leo(zxy)的博客-程序员秘密

Merkle:快速比较大量数据:对每组数据排序后构建Merkle树结构。当两个Merkle树根相同时,两组数据也必然相同。否则,必然存在不同。由于Hash计算的过程可以十分迅速,预处理可以在短时间内完成。利用Merkle树结构能带来巨大的比较性能优势。快速定位修改:如果一个节点的数据被修改,那么它的父节点,父节点的父节点直到根节点,会一路收到影响。因此,一旦发现根节点的数值发生变化,可以快速...

RedHat安装httpd及遇到的问题_苏沐雨的博客-程序员秘密_rhel 安装httpd

RedHat安装httpd.使用源码编译安装的方式安装httpd和ntfs-3g软件到本机上对httpd进行编译安装:2.1首先查看是否安装gcc,如果未安装则安装2.2然后下载httpd-2.4.46.tar.gz 文件,进行解压:cd /usr/local/src wget http://mirror.bit.edu.cn/apache/httpd/httpd-2.4.34.tar.gz tar zxvf httpd-2.4.34.tar.gz  cd httpd-2.4.34 

python代码运行时出现UnicodeEncodeError: ‘ascii‘ codec can‘t encode_Coco_happy1314的博客-程序员秘密

问题python代码运行时出现UnicodeEncodeError: ‘ascii’ codec can’t encodecharacters in position 10-11: ordinal not in range(128)原因因为python是解释性语言;解析器只支持 ascii 0-127,即python语言不支持中文解决方案import urllib.parseimport stringurl = "https://www.baidu.com/s?wd=鲜花"en

推荐文章

热门文章

相关标签