我想模糊文本中的影像。但是一旦我添加了模糊過濾器，文本也會變得模糊。
解決方案可能很簡單。但是我已經堅持了很長一段時間了。任何幫助表示贊賞。
我希望它看起來如何：
到目前為止的樣子：
body {
background: #16171a;
}
.bg {
background-image: url(https://xl.movieposterdb.com/21_08/2021/1160419/xl_1160419_230b1df1.jpg?v=2021-10-28 22:02:33);
background-size: cover;
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
overflow: auto;
-webkit-filter: grayscale(100%) brightness(10%);
filter: grayscale(100%) brightness(10%);
}
.title {
background-image: url(https://xl.movieposterdb.com/21_08/2021/1160419/xl_1160419_230b1df1.jpg?v=2021-10-28 22:02:33);
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 40vw;
font-family: 'Teko';
text-align: center;
z-index: 100;
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
overflow: auto;
-webkit-filter: saturate(90) blur(20px);
filter: saturate(90) blur(20px);
}
/*# sourceMappingURL=style.css.map */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@700&display=swap" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="title">DUNE</div>
<div class="bg"></div>
</body>
</html>uj5u.com熱心網友回復：
你可以模糊源影像本身嗎？例如，下載您現在擁有的影像并在
uj5u.com熱心網友回復：
我最終得到的解決方案是使用一個 SVG 元素，里面有一個 TEXT 元素
#bg{
background-repeat: no-repeat;
background-size: cover;
background-position-y: center;
z-index: 90;
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
overflow: auto;
filter: grayscale(100%) brightness(10%);
}
#text{
font-family: 'Teko';
font-size: 40vw;
text-align: center;
text-transform: uppercase;
position: fixed; left:0; top:0;
z-index: 100;
}
#text rect{
color: white;
fill: none
}
#movieImage{
width: 100%;
height: 100%;
filter: saturate(100) blur(50px);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@700&display=swap" rel="stylesheet">
<title>Title</title>
</head>
<body>
<svg id="text" height="100%" width="100%">
<defs>
<mask id="mask" x="0%" y="0%" height="100%" width="100%">
<rect x="0%" y="0%" height="100%" width="100%"/>
<text id="title" x="50%" y="60%" fill="white" text-anchor="middle" >DUNE</text>
</mask>
</defs>
<image id ="movieImage" xlink:href="https://xl.movieposterdb.com/21_08/2021/1160419/xl_1160419_230b1df1.jpg?v=2021-10-28 22:02:33" preserveAspectRatio="xMidYMid slice" mask="url(#mask)" />
<rect x="0%" y="0%" height="100%" width="100%"/>
</svg>
<div id="bg" style="background-image: url('https://xl.movieposterdb.com/21_08/2021/1160419/xl_1160419_230b1df1.jpg?v=2021-10-28 22:02:33')"></div>
</body>
</html>
<!-- width="100%" height="100%" -->轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/344773.html