CSS半透明磨砂效果实现
最近在搭建個(gè)人網(wǎng)站，想做一點(diǎn)炫酷或是優(yōu)雅的效果。記錄一下這兩天摸索出的搭配。首先就是磨砂半透明。
我們都知道w3c標(biāo)準(zhǔn)有一個(gè)很炫酷的效果：filter:blur();該效果能夠?qū)崿F(xiàn)高斯模糊，參數(shù)為高斯模糊的半徑。
但是如果我們直接將一個(gè)高斯模糊的效果作用在一個(gè)背景元素上，那么前景元素上的所有文字也會(huì)被模糊，來(lái)一個(gè)例子演示一下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div class="wrapper"><div class="block"><p>這是一段文字:XXXXXXXXX</p><p>這也是一段文字</p></div></div></body></html><style>body {background-image: url("https://pic3.zhimg.com/v2-b7408711f99a5dc49decc3ce0aee6ac6_r.jpg");background-attachment: fixed;background-repeat: no-repeat;background-size: cover;}.wrapper {position: absolute;display: flex;justify-content: center;align-items: center;left: 0;right: 0;top: 0;bottom: 0;}.block {font-size: 30px;color: rgb(0,32,237);}</style>現(xiàn)在文字容器背景加一個(gè)高斯模糊，修改.block：
.block {font-size: 30px;color: rgb(0,32,237);filter: blur(20px);}效果如下：
可以看到，中心的文字都模糊掉了，這可不是我們想要的效果。解決方法為：使用backdrop-filter代替flilter：
效果如下：
但是如此其實(shí)還算不夠，因?yàn)槿绻阈枰獙⒛：Ч┘釉诤艽蟮囊黄瑓^(qū)域上的話，直接使用全屏的高斯模糊不僅會(huì)讓人感到視覺(jué)疲勞，而且會(huì)降低前景區(qū)域的對(duì)比度，讓人們閱讀一些白色，灰色文字時(shí)感到困難。比如，我們來(lái)看某位大佬的博客：
這就不是使用簡(jiǎn)單的高斯模糊實(shí)現(xiàn)的。要實(shí)現(xiàn)這樣的效果，我個(gè)人摸索出的方法就是：
比如剛才的例子，就可以這么修改.block：
.block {font-size: 30px;border-radius: 2em;backdrop-filter: blur(20px);background-color: rgba(255, 255, 255, 0.5);}效果如下：
再加一個(gè)圓角，調(diào)整一下padding就完美了：
效果如下：
基于這個(gè)效果，制作一個(gè)簡(jiǎn)約風(fēng)格的登陸頁(yè)面就很簡(jiǎn)單了
總結(jié)
以上是生活随笔為你收集整理的CSS半透明磨砂效果实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 前端学习（1918）vue之电商管理系统
- 下一篇： html中如果设置颜色为半透明状态,CS