html设置照片模糊效果,CSS如何实现照片模糊?
生活随笔
收集整理的這篇文章主要介紹了
html设置照片模糊效果,CSS如何实现照片模糊?
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在開發網頁時,照片模糊處理會經常被使用,比如當我們背景圖的模糊,當我們不想背景圖片過于突出影響美觀時,就可以設置將照片模糊處理,突出文字部分。那么 CSS 如何實現照片模糊呢?這篇文章 w3cschool 小編告訴你。
首先讓我們先來看下原圖:
讓我們再來看下實現效果:
以上圖片肉眼可見的被模糊了,而且可以突出文字。其實照片模糊處理的實現十分簡單。僅用一個代碼樣式就可以實現。那就是?filter:?blur(模糊數值)?。當然,要實現兼容性的話需要就得使用?-webkit-filter:?blur(模糊數值)。
讓我們來看下實現的代碼:
圖片模糊 - 編程獅(w3cschool.cn)img {
-webkit-filter: blur(3px); /*兼容性*/
filter: blur(3px); /*模糊效果*/
margin-top: 10px;
}
h1 {
color:#EBEDEF;
}
.text {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
w3cschool-編程獅
這是一張被模糊的照片
以上就是 CSS 如何實現照片模糊的全部內容。更多 CSS 效果實現請關注 w3cschool 官網。
總結
以上是生活随笔為你收集整理的html设置照片模糊效果,CSS如何实现照片模糊?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: PAT——个位数统计(1021)
- 下一篇: input变下划线的输入框CSS