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 基本功能——遮罩蒙版效果 分欄效果 - 獨行冰海 - 獨行冰海


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM