這個屬性是相當強大的,詳細的介紹請到這裡檢視,它非常值得深入研究.
-webkit-mask 讓為乙個元素新增蒙板成為可能,從而你可以建立任意形狀的花樣。蒙板可以是 css3 漸變或者半透明的 png 。蒙板元素的 alpha 值為0的時候會覆蓋下面的元素,為1的時候會完全顯示下面的內容。相關的屬性有 -webkit-mask-clip 、 -webkit-mask-position 和 -webkit-mask-repeat 等,嚴重依賴來自於 background 中的語法。
可以如下新增 css **,讓 svg 作為蒙版圖:12
3456
.icon
svg 可以畫出各種形狀的圖形,使用十分方便,通過以下方法可以只改變css的背景顏色就改變 svg 的背景顏色。
html 結構:12
3456
7...css:12
3456
78910
11/*給每個 div 新增樣式,並使用 svg 最為蒙版背景*/
.icon
只要改變 div 背景顏色, svg 的顏色也會改變12
3456
.icon-red
.icon-orange
.icon-yellow
.icon-green
.icon-blue
demo
mask 屬性十分強大,但是需要最先進的瀏覽器支援。
svg基本使用
svg 檔案可通過以下標籤嵌入 html 文件 或者 矩形rect x,y width height 圓形circle cx,cy cr 橢圓ellipse cx,cy rx ry 線 line x1,y1,x2,y2 折線 polyline points x1,y1 x2,y2 xn,yn 多邊形...
簡單使用SVG
在前端的工作過程中經常會使用一些圖示。在之前我們曾用過兩種方式 純css,iconfont。使用是一種簡單的方式,然而卻有樣式不好調整,資源較大的缺點。純css只能實現較簡單的圖形,多用before after實現,優點是體積小,缺點是每次使用都是手寫,調整太浪費時間。iconfont是阿里的乙個圖...
Qt之SVG轉QPixmap並改變顏色
方法有兩種,使用qsvgrenderer與不使用qsvgrenderer 使用qt類將svg轉換為qpixmap格式是非常容易的,在qt文件中有些相關的例子,但是這些例子僅僅處理了螢幕裝置的標準畫素比為1的情況。如果你需要在高分屏上顯示影象,結果會有些不一樣。下面的函式傳入svg檔案的路徑,並根據第...