小編給大家分享一下html代碼讓照片變模糊的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元東至做網(wǎng)站,已為上家服務(wù),為東至各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

在html中可以使用filter屬性和blur()函數(shù)來讓照片變模糊，只需要給img照片添加“filter: blur(px);”代碼樣式即可。filter屬性用于定義圖片元素的可視效果，設(shè)置值為“blur(值)”時可以給圖像設(shè)置高斯模糊。

在HTML中，可以使用filter 屬性，設(shè)置值為“blur(px)”來讓照片變模糊。

css filter 屬性

filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。

blur(px)：給圖像設(shè)置高斯模糊。"radius"一值設(shè)定高斯函數(shù)的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設(shè)定值，則默認是0；這個參數(shù)可設(shè)置css長度值，但不接受百分比值。

示例：

	
		
		
			body,
			html {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
			
			.container {
				padding: 20px;
				position: relative;
				overflow: hidden;
			}
			
			img {
				height: 200px;
				transition: .5s ease-in-out;
			}
			
			.container div {
				width: 300px;
				overflow: hidden;
				float: left;
				margin-left: 40px;
			}
			
			.blur img {
				filter: blur(15px);
				-webkit-filter: blur(15px);
			}
			
			.blur img:hover {
				filter: blur(0);
				-webkit-filter: blur(0);
			}