CSS Blur() 將高斯模糊應用於輸出圖片

時間 2019-11-05

標籤 css blur 高斯模糊應用於輸出圖片欄目 CSS 简体版

原文原文鏈接

1、Css Blur()css

blur() CSS 方法將高斯模糊應用於輸出圖片. 結果爲 <filter-function>.html

blur(radius)

radius模糊的半徑，值爲<length>。它定義了高斯函數的標準誤差值，即屏幕上有多少像素相互融合; 所以，較大的值會產生更多模糊。值爲0會使輸入保持不變。該值爲空則爲0。web

blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

2、使用示例：app

filter: blur(0);函數

filter: blur(4px);post

filter: blur(1.5rem);spa

2.示例：3d

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
</style>
</head>
<body>

<p>圖片使用高斯模糊效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>