CSS3濾鏡filter: blur,使圖片或背景模糊(毛玻璃)

阿新 • • 發佈：2019-01-15

CSS毛玻璃效果可以通過filter: blur()實現，類似PS高斯模糊，圖片和背景都可以使用；但在移動端，會造成卡頓，不建議在移動端使用；

CSS:

.blur{
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px); 
}
.jay{
	width: 300px;
	height: 180px;
}
.bg{
	background: url(img/jay.jpg);
	background-size: cover;
	background-position: center;
}

HTML:

<!--背景模糊-->
<div class="jay bg blur"></div>
<!--原圖-->
<div class="jay bg"></div>
<!--圖片模糊-->
<div class="jay">
	<img src="img/jay.jpg" class="blur" width="300"/>
</div>

效果如圖（圖片來自百度/周杰倫）

CSS3濾鏡filter: blur,使圖片或背景模糊(毛玻璃)

CSS毛玻璃效果可以通過filter: blur()實現，類似PS高斯模糊，圖片和背景都可以使用；但在移動端，會造成卡頓，不建議在移動端使用； CSS: .blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px);

CSS3 filter濾鏡屬性小專案——圖片高斯模糊、高亮、對比度、灰度、色調、色彩旋轉、透明、飽和、褐色調整

學到了CSS3的filter屬性，心血來潮做了個filter濾鏡組工具，可以多重給自己的圖片新增濾鏡。拿走不謝，別忘了更改對應的路徑名。程式碼如下 html部分 <!DOCTYPE html> <html> <head>

HTML5----CSS3圖片濾鏡(filter)特效

拖動 ner hot war str term min jquer onchange 支持Chrome: 暫不支持瀏覽器：FF,IE... 希望後者努力效果圖： CSS: <style type="text/css"> @-webkit-key

css3濾鏡-模糊Blur濾鏡

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>模糊濾鏡</title><style type="text/css">

CSS3濾鏡

() rop add 書寫 mic bsp .com left filter h4 { background: #32afba; line-height: 36px; color: #fff; font-family: Microsoft YaHei; letter-spa

css3濾鏡效果

gid tran microsoft for 效果 image pix lte css filter:blur(3px); -webkit-filter:blur(3px); -moz-filter:blur(3px); -o-filter:blur(3px); filte

CSS技巧收集——毛玻璃效果（深入理解濾鏡filter）

* { margin: 0px; padding: 0px; } html, body { font-size: 19px; font-family: 'Verdana', 'Arial'; color: rgba(0, 0, 0, 0.8); wi

CoreImage中濾鏡filter的屬性

"Affine Clamp" = "AffineClamp"; "Affine Tile" = "AffineTile"; "Bars Swipe" = "棒狀滑動 (Bars Swipe)"; "Bars Swipe Transition" = "棒狀滑動過渡轉場 (Bars Sw

firefox對css3濾鏡-----模糊相容

昨天寫了一個css3的濾鏡模糊的效果，但是我發現，我firefox一點效果都沒有，寫法如果下 filter:blur(3px);-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px)filter:

[前端] css3濾鏡效果

最近到處看到有人在說CSS3的filter一直沒有時間自己去測試這效果。今天終於抽出時間學習這個CSS3的Filter。不整不知道呀，一整才讓我感到吃驚，太強大了。大家先來看個效果吧：我想光看上面的效果就能吸引你了，要是你自己動手的話，我想您更會感到神奇。細一看，

css3濾鏡-通道(Alpha)濾鏡

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>通道(Alpha)濾鏡</title></head><body sty

css3 濾鏡模糊，黑白，對比度等濾鏡效果效果

先上程式碼： filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filte

FFMPEG 最簡濾鏡filter使用例項（實現視訊縮放，裁剪，水印等）

FFMPEG官網給出了FFMPEG 濾鏡使用的例項，它是將視訊中的畫素點替換成字元，然後從終端輸出。我在該例項的基礎上稍微的做了修改，使它能夠儲存濾鏡處理過後的檔案。在上程式碼之前先明白幾個概念： Filter:代表單個filter FilterPa

CSS3濾鏡詳解--相容器問題解決

CSS3中提供濾鏡的屬性是：filter 他的值有 blur( <length> )：模糊值，預設值為0 越大月模糊以下預設值為100% brightness( [ <number（數值）> | <percentage（百分比）>

iOS7 設定背景圖片或導航為毛玻璃效果

1.首先匯入系統庫 Accelerate.framework 2.其次在要實現毛玻璃效果的頁面新增標頭檔案 #import <Accelerate/Accelerate.h> 3

js+css 設定圖片或背景透明

html檔案： <li class="lead_btn"> <a href="#" target="_blank"> <img class="lazyload" src="images/spacer0.png" />

css3 filter 濾鏡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> d

css: CSS3 filter(濾鏡) 的使用

CSS3 filter(濾鏡) 屬性 filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。定義和使用預設值 none 繼承 no 動畫支援是。詳細可查閱 CSS 動畫

css3 filter濾鏡

css3濾鏡用法 elem{ filter: none | <filter-function > [ <filter-function> ]* } 多個濾鏡可以疊加使用，中間用空格隔開 CSS3 的10中濾鏡十種

CSS3 filter(濾鏡用法)

這裡是html程式碼 <p><strong>注意：</strong> Internet Explorer 不支援 filter 屬性。</p>

CSS3濾鏡filter: blur,使圖片或背景模糊(毛玻璃)

相關推薦