css背景虛化效果程式碼例項
本章節分享一段程式碼例項,它利用css實現了背景虛化效果。
所謂的虛化效果,就是類似於毛玻璃的那種感覺。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .bg{ background: url('img/2.jpg'); background-repeat: no-repeat; width: 300px; height:200px; z-index: -1; position: absolute; -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); filter: blur(10px); filter: url(blur.svg#blur); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); } </style> </head> <body> <div class="bg"></div> </body> </html>
上面的程式碼還需要blur.svg配合:
[XML] 純文字檢視 複製程式碼<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="wh100"> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> </filter> <image filter="url(#blur)" x="0" y="0" width="100%" height="100%" xlink:href="{pic}" alt=""> </svg>
相關文章
- CSS3背景漸變效果程式碼例項CSSS3
- css多行文字底部虛線效果程式碼例項CSS
- CSS條紋背景程式碼例項CSS
- css切角效果程式碼例項CSS
- css模糊效果程式碼例項CSS
- css優化文字顯示效果程式碼例項CSS優化
- CSS橢圓效果程式碼例項CSS
- css立體效果程式碼例項CSS
- css Sprite 動畫效果程式碼例項CSS動畫
- css斜線效果程式碼例項CSS
- css 心形效果程式碼例項CSS
- CSS3發光背景程式碼例項CSSS3
- CSS文字模糊效果程式碼例項CSS
- css內邊框效果程式碼例項CSS
- css文章豎排效果程式碼例項CSS
- css六邊形效果程式碼例項CSS
- css3星空效果程式碼例項CSSS3
- css紙飛機效果程式碼例項CSS
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- css實現矩形切角效果程式碼例項CSS
- div css搜尋框效果程式碼例項CSS
- css多元素水平居中效果程式碼例項CSS
- CSS3小黃人效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3彈球效果程式碼例項CSSS3
- div css三列布局效果例項程式碼CSS
- css3控制多個背景圖片移動形成動畫效果程式碼例項CSSS3動畫
- css3動態背景圖片程式碼例項CSSS3
- css設定背景圖片樣式程式碼例項CSS
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- CSS3滑過光束效果程式碼例項CSSS3
- css3繪製月牙效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- css3立方體效果程式碼例項CSSS3