讓背景出現毛玻璃的效果

2021-08-16 10:00:07 字數 673 閱讀 7075

1.背景是半透明的

2.背景有毛玻璃的模糊效果

3.上面的字型清晰可見

效果如下:

先是背景透明,字型清晰可見

div

再來個模糊處理

div

還做了相容處理,美滋滋。

開啟瀏覽器重新整理:

我擦,這都是什麼鬼。不行,要分析一下。

原來div裡面的字和div是在乙個盒子裡面,設定這個盒子為模糊,那麼裡面的字一起都會被設為模糊。所以,我們可以通過以下方法:

要設定模糊背景的地方通過偽元素設定背景顏色,區域relative定位,偽元素absolute定位,這樣讓偽元素的大小完全等於本來區域的大小 然後用blur濾鏡進行模糊處理,再設定偽元素z-index為 -1,置於最底層,就ok啦。

div

div::before

這樣 就得到了第一張圖的效果。

感謝他的思路。

IOS毛玻璃效果

最近實習公司的ios專案中需要用到毛玻璃的效果 如下圖效果 嘗試用了幾個方法都不太滿意,最後終於找到了乙個比較好的解決方案。在ios8以上的機器中,我們可以利ios sdk中已經提供了的uiblureffect和uivisualview實現簡單毛玻璃的效果。實現的方法如下 其中visualeffec...

iOS 毛玻璃效果

注 新增毛玻璃的view要clearcolor,其他顏色會效果不明顯 分享兩種毛玻璃效果設定的方法,不需要任何三方東東,先看效果 原圖 方法一 ios8系統方法 方法二 下面是示例 objc view plain copy import viewcontroller.h inte ce viewco...

OpenCV 毛玻璃效果

毛玻璃效果的原理,即遍歷每乙個畫素,隨機選取這個畫素周圍的某乙個畫素,替換當前畫素。實現 如下 import cv2 import numpy as np import random img cv2.imread test.png 1 imginfo img.shape height imginfo...