如何通过CSS3实现背景图片色彩的梯度渐变
隨著網站的越來越普及,CSS3和HTML5必將成為網站前端發展的主流方向,特別是在移動端,高端瀏覽器給前端工程師們帶來了無以言表的體驗。
通俗的來講,CSS3可以說是CSS技術的升級版本,CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜,所以,把它分解為一些小的模塊,更多新的模塊也被加入進來。這些模塊包括:盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。那么,今天我首先要在馬海祥博客上跟大家分享的就是CSS3的Gradients(梯度漸變)。
首先我們先來看下新的梯度漸變語法,新的語法包含四個漸變函數:
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
這些函數名無需過多的解釋,我之后會在馬海祥博客上談到更多關于循環漸變網頁設計。
因為規范仍是初稿階段,所以我們在這些漸變函數前加以-webkit-前綴。當以后規范不再是初稿階段,我們將能夠不加前綴而使用他們。
1、Linear Gradients(線性梯度漸變)
為元素盒模型填充線性漸變是最常用的。你只需要考慮漸變從哪個方向開始。據馬海祥了解有兩種方式可以去指定它。
第一種,你可以指定漸變從哪個方向或角落開始:
linear-gradient(left, white, black)
linear-gradient(top right, white, black)
你甚至可以省略第一個參數,他將默認為top并給出一個垂直漸變。
第二種,你可以指定漸變的角度:
linear-gradient(135deg, white, black)
角度按逆時針方向旋轉,0度時為從左向右方向。
注意在所有這些情況下,漸變足夠大以填滿元素盒模型。
2、Radial Gradients(徑向梯度漸變)
徑向漸變更加復雜,在填充時有更多的選項。
馬海祥覺得最簡單的形式是以元素盒模型中心為漸變起始,向外填充至每個角落:
radial-gradient(white, black)
這相當于 radial-gradient(center, ellipse cover, white, black)。
第一個參數為可選,默認為 center ,也可以是一個點(就像 background-position ),他允許你將原點放置到其它地方:
radial-gradient(10% 30%, white, black)
原點位置后面的參數用來指定漸變的形狀和大小,這是兩種方式之一。
這種方式用一些關鍵詞來描述形狀(circle,ellipse)和大小(closest-side,closest-corner,farthest-side,farthest-corner,contain,cover)例如:
radial-gradient(30% 30%, closest-corner, white, black)
radial-gradient(30% 30%, circle closest-corner, white, black)
如果你愿意,你還可以分別指定徑向漸變的水平與垂直結束半徑:
radial-gradient(center, 5em 40px, white, black)
3、Repeating Gradients(重復梯度漸變)
循環漸變 repeating-linear-gradient()和repeating-radial-gradient()
擁有完全相同的簡寫語法,且整個漸變將被循環填充:
repeating-linear-gradient(left, red 10%, blue 30%)
這些停靠點將被循環用于調整他們首尾相連,這常常會導致顏色之間過渡強烈。
你可以避免循環末尾的顏色:
repeating-radial-gradient(top left, circle, red, blue 10%, red 20%)
4、Color Stops(色站)
為漸變指定顏色停靠點很容易;最簡單的情況下,你只需要提供一個顏色列表:
linear-gradient(left, red, green, blue)
這樣會使所有的顏色平均分布于漸變之上。web前端
如果你愿意,你還可以為個別顏色定位具體的停靠點,然后讓瀏覽器分配其它剩余的:
linear-gradient(bottom left, red 20px, yellow, green, blue 90%)
那些漸變軸線可能是條對角線;那么百分比則相應對角線的長度。
顏色的停靠點相同會使顏色之間過渡強烈:
linear-gradient(top left, red, yellow, green 60%, purple 60%, blue)
總結
以上是生活随笔為你收集整理的如何通过CSS3实现背景图片色彩的梯度渐变的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 调试调试调试调试调试调试调试调试调试调试
- 下一篇: Fel表达式使用过程中需要注意的问题