|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 本章給大家介紹用css3如何實現圖片的高斯模糊效果，CSS3 Filter（濾鏡）實現對圖片元素模糊處理；讓大家了解如何設置圖片元素的模糊效果，通過實例介紹filter實現圖片高斯模糊的三種效果。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。一、什么是filter （濾鏡） CSS3 Filter（濾鏡）屬性定義了元素(通常是<img>)的可視效果，提供了模糊和改變元素顏色的功能。CSS3 Fitler 常用于調整圖像的渲染、背景或邊框顯示效果。 瀏覽器支持： -webkit-filter是css3的一個屬性，Webkit率先支持了這幾個功能，感覺效果很不錯。
表格中的數字表示支持該方法的第一個瀏覽器的版本號。 緊跟在數字后面的 -webkit- 為指定瀏覽器的前綴。 注意: 舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標準 "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用css opacity 屬性。 下面看看filter這個屬性，現在規范中支持的效果：
實現模糊效果的filter 語法： filter: blur(); blur()給圖像設置高斯模糊。"length（radius）"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。 二、圖片模糊的三種效果 原圖：
1.css普通圖片模糊效果（整張圖片全模糊） <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
position: relative;
background: url("2.png") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(2px);
z-index: 2;
}
.drag {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
text-align: center;
z-index: 11;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>效果圖：
2.css圖片局部模糊效果 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
background: url("2.png") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.drag {
margin: 100px auto;
width: 300px;
height: 300px;
background: inherit;
position: relative;
text-align: center;
}
.drag>div {
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 11;
}
.drag:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(30px);/*為了模糊更明顯，調高模糊度*/
z-index: 2;
}
</style>
</head>
<body>
<div class="bg">
<div class="drag">like window</div>
</div>
</body>
</html>效果圖:
3.css圖片局部清晰效果 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
background: url("2.png") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(3px);
z-index: 1;
}
.drag {
position: absolute;
left: 40%;
top: 30%;
/*transform: translate(-50%,-50%);*/
width: 200px;
height: 200px;
text-align: center;
background: inherit;
z-index: 11;
box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div class="bg">
<div class="drag">like window</div>
</div>
</body>
</html>效果圖：
以上就是css3如何實現圖片的高斯模糊效果？CSS3 Filter（濾鏡）實現（代碼實例）的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
