css遮罩蒙版效果分欄效果

時間 2019-12-04

標籤 css 效果分欄欄目 CSS 简体版

原文原文鏈接

mask遮罩蒙版效果

來看一下效果圖：

這是兩張原圖：

遮罩層圖像

CSS3 基礎知識彙總2 基本功能——遮罩蒙版效果分欄效果 - 獨行冰海 - 獨行冰海

注意，白色區域爲透明狀態

要展現的圖像

使用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

也可將css部分更改成漸變的蒙版樣式

img{
-webkit-mask-image:-webkit-radial-gradient(50% 50%,rgba(0,0,0,0),rgba(0,0,0,1));
}html

能夠更改蒙版的起始位置（在上面的代碼中添加以下代碼）

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

效果：

分欄效果

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>
url