Apple や Windows10 のようなすりガラス効果を設定したいのですが、次のようになります。
実際にはガウスぼかしの円ですが、最下層を実現するにはガウスぼかしとフィールドプーリングの 2 つの方法があると思います。
以下のビジョンには2 種類の曇りガラス効果があり、後者は疑似曇りガラスであり、視覚効果の点で単色またはグラデーション単色の背景に使用するのに適しています。
方法 1: を使用するblur
Web デザインでは、対応するコンポーネントの背景フィルター プロパティを に設定しますblur。blurパラメーターはガウスぼかしの半径で、通常は に設定されます50px。小さなデモをしてみましょう:
<!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>Tranplate1</title>
<style>
body{
background-image: linear-gradient(to right top, #65dfc9, #6cdbeb);
align-items: center;
justify-content: center;
display: flex;
}
.main{
background-color: rgba(255, 255, 255, 0.4);
position: relative;
width: 60%;
height: 600px;
box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);
display: flex;
border-radius: 50px;
align-items: center;
top: 100px;
backdrop-filter: blur(50px);
}
</style>
</head>
<body>
<div class="main"></div>
</body>
</html>
効果は図の右側のようになります
方法 2: 透明チャネルの線形差分
以前 YouTube を閲覧していたときに見つけた方法では、グラデーションの背景に疑似すりガラス効果を作成できます。簡単に言うと、背景に線形の差を使用するだけで十分です。開始状態と終了状態は up です。例は次のlinear-gradientとおりrgba(255,255,255,0.3)ですrgba(255,255,255,0.7)。次のように：
<!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>Transplate2</title>
<style>
body{
background-image: linear-gradient(to right top, #65dfc9, #6cdbeb);
align-items: center;
justify-content: center;
display: flex;
}
.main{
background-image: linear-gradient(to right top, rgba(255,255,255,0.3), rgba(255,255,255,0.7));
position: relative;
width: 60%;
height: 600px;
box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);
display: flex;
border-radius: 50px;
align-items: center;
top: 100px;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
</html>
効果は次のとおりです。
