如何在不担心用户滚动的情况下模糊 SVG 背景？
How to blur an SVG background without worrying about users scrolling?
我有一个带有 SVG 背景的简单网页。我想稍微模糊一下，所以我在背景上放置了一个 div，应该包括所有内容。
但是，无论我在用户向下滚动时尝试过什么，div 设置模糊都会向上滚动，留下一部分背景不模糊。
我将我的内容设置在模糊 div 中，并将模糊 div 的最小高度设置为 100vh，因为我认为这将使其与人们使用的任何尺寸的屏幕保持一致查看页面。
解决这个问题并使模糊 div 保持不变的正确方法是什么？
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #29292b;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1027%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M633.389334817045 59.875956388694625L531.5846329373846 176.98886913760924 648.6975456862992 278.7935710172696 750.5022475659596 161.68065826835496z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1264.189%2c364.83C1313.567%2c363.088%2c1361.23%2c343.326%2c1386.949%2c301.139C1413.732%2c257.207%2c1417.279%2c201.28%2c1390.785%2c157.174C1364.981%2c114.217%2c1314.3%2c97.05%2c1264.189%2c96.778C1213.511%2c96.503%2c1162.8%2c113.288%2c1135.194%2c155.788C1105.053%2c202.191%2c1096.398%2c263.273%2c1125.456%2c310.362C1153.419%2c355.677%2c1210.974%2c366.707%2c1264.189%2c364.83' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1176.320425197103 225.26338325118923L1047.2482002767379 227.51634731760367 1049.5011643431521 356.588572237969 1178.5733892635176 354.33560817155455z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M774.447%2c470.872C810.854%2c468.438%2c832.589%2c434.044%2c849.689%2c401.811C865.384%2c372.227%2c876.723%2c337.986%2c860.487%2c308.695C843.856%2c278.691%2c808.74%2c265.163%2c774.447%2c266.068C741.77%2c266.93%2c713.652%2c285.572%2c695.927%2c313.037C676.266%2c343.502%2c663.35%2c380.725%2c679.5%2c413.188C697.179%2c448.724%2c734.844%2c473.519%2c774.447%2c470.872' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1291.35 403.11 a95.55 95.55 0 1 0 191.1 0 a95.55 95.55 0 1 0 -191.1 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1099.954%2c89.29C1131.364%2c89.445%2c1163.523%2c77.431%2c1178.52%2c49.833C1193.003%2c23.18%2c1182.834%2c-8.36%2c1167.114%2c-34.303C1152.092%2c-59.093%2c1128.936%2c-80.315%2c1099.954%2c-79.822C1071.628%2c-79.34%2c1051.197%2c-56.386%2c1036.635%2c-32.085C1021.516%2c-6.854%2c1009.117%2c22.983%2c1022.722%2c49.062C1037.112%2c76.645%2c1068.843%2c89.136%2c1099.954%2c89.29' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1142.4892192091047 338.3186580652039L1039.1426113136092 298.64761215121604 999.4715653996212 401.9942200467116 1102.8181732951168 441.6652659606995z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M266.17296675779653 305.0825534071096L353.1760173894231 342.0131573336442 365.07039796341166 193.04327942293702z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M774.9 542.78 a139.63 139.63 0 1 0 279.26 0 a139.63 139.63 0 1 0 -279.26 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1304.069%2c469.109C1326.274%2c468.209%2c1347.198%2c458.762%2c1359.01%2c439.938C1371.637%2c419.815%2c1375.425%2c394.448%2c1363.982%2c373.628C1352.157%2c352.113%2c1328.594%2c338.86%2c1304.069%2c339.976C1281.174%2c341.018%2c1264.754%2c359.06%2c1252.909%2c378.681C1240.513%2c399.216%2c1229.023%2c423.85%2c1240.835%2c444.727C1252.758%2c465.801%2c1279.876%2c470.089%2c1304.069%2c469.109' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M127.53118098930202 360.1862848323867L32.3534223132564 392.95861531556926 65.12575279643893 488.13637399161485 160.30351147248456 455.36404350843236z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M701.4589822596724 418.76384225491245L627.3563235248796 427.86250466940174 678.05564651401 534.4671615643462z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M347.47 335.38 a102.14 102.14 0 1 0 204.28 0 a102.14 102.14 0 1 0 -204.28 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M-23.57 372.42 a101.04 101.04 0 1 0 202.08 0 a101.04 101.04 0 1 0 -202.08 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M98.46917721273377 553.0497123740521L61.14764707686262 455.823802339454 1.2432671781356532 590.3712425099233z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M837.6798193978472 71.47858546233797L740.6326000621607 195.69336177865614 961.8945957141653 168.52580479802438z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M505.30829196217996-76.6237400495515L433.957033425644 11.48772623241409 522.0684997076096 82.83898476895006 593.4197582441456-5.272481513015535z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M492.63855337263624 199.82743188451758L465.8041086563703 263.0454219548993 574.0483161200759 271.68809399410736z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M454.92592795672914 557.6203190807731L395.7873159397918 459.19714048629663 297.3641373453154 518.335752503234 356.50274936225264 616.7589310977104z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M831.4184231139951 451.49037589383215L911.2645809117197 569.8671729304476 949.7952201506106 371.6442180961076z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1027'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
@font-face {
font-family: Overpass,Helvetica,Arial,sans-serif;
font-display: swap;
}
}
.body::before {
opacity: 0.75;
}
.blurdiv {
background: inherit;
overflow: hidden;
z-index: 1;
min-height: 100vh !important;
}
.blurdiv:before{
content: "";
position: absolute;
background: inherit;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: blur(2.5px);
}
.front {
position: relative;
z-index: 2 !important;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="x.css">
</head>
<body>
<div class="blurdiv" >
<div class="front">
<div>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
</div>
</div>
</div>
</body>
</html>
由于背景纯粹是装饰性的，出于可访问性原因，将其从 HTML 主体中删除并仅通过 CSS 样式插入是很有用的。
给定的代码有几个 'layers' 背景模糊 div 及其伪元素。我们可以通过删除背景并将伪元素直接放在主体上来插入背景。
我们希望背景在视口中保持固定并始终覆盖它，而不管用户是否滚动，因此这个伪元素的位置是固定的，并且具有完整的视口高度和宽度。
SVG 已经包含蓝色背景，所以我们不需要在主体上设置任何背景颜色。它也已经是一个重复的模式，因此不必设置或取消设置。
<style>
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
@font-face {
font-family: Overpass,Helvetica,Arial,sans-serif;
font-display: swap;
}
}
body::before {
content: '';
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1027%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M633.389334817045 59.875956388694625L531.5846329373846 176.98886913760924 648.6975456862992 278.7935710172696 750.5022475659596 161.68065826835496z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1264.189%2c364.83C1313.567%2c363.088%2c1361.23%2c343.326%2c1386.949%2c301.139C1413.732%2c257.207%2c1417.279%2c201.28%2c1390.785%2c157.174C1364.981%2c114.217%2c1314.3%2c97.05%2c1264.189%2c96.778C1213.511%2c96.503%2c1162.8%2c113.288%2c1135.194%2c155.788C1105.053%2c202.191%2c1096.398%2c263.273%2c1125.456%2c310.362C1153.419%2c355.677%2c1210.974%2c366.707%2c1264.189%2c364.83' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1176.320425197103 225.26338325118923L1047.2482002767379 227.51634731760367 1049.5011643431521 356.588572237969 1178.5733892635176 354.33560817155455z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M774.447%2c470.872C810.854%2c468.438%2c832.589%2c434.044%2c849.689%2c401.811C865.384%2c372.227%2c876.723%2c337.986%2c860.487%2c308.695C843.856%2c278.691%2c808.74%2c265.163%2c774.447%2c266.068C741.77%2c266.93%2c713.652%2c285.572%2c695.927%2c313.037C676.266%2c343.502%2c663.35%2c380.725%2c679.5%2c413.188C697.179%2c448.724%2c734.844%2c473.519%2c774.447%2c470.872' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1291.35 403.11 a95.55 95.55 0 1 0 191.1 0 a95.55 95.55 0 1 0 -191.1 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1099.954%2c89.29C1131.364%2c89.445%2c1163.523%2c77.431%2c1178.52%2c49.833C1193.003%2c23.18%2c1182.834%2c-8.36%2c1167.114%2c-34.303C1152.092%2c-59.093%2c1128.936%2c-80.315%2c1099.954%2c-79.822C1071.628%2c-79.34%2c1051.197%2c-56.386%2c1036.635%2c-32.085C1021.516%2c-6.854%2c1009.117%2c22.983%2c1022.722%2c49.062C1037.112%2c76.645%2c1068.843%2c89.136%2c1099.954%2c89.29' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1142.4892192091047 338.3186580652039L1039.1426113136092 298.64761215121604 999.4715653996212 401.9942200467116 1102.8181732951168 441.6652659606995z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M266.17296675779653 305.0825534071096L353.1760173894231 342.0131573336442 365.07039796341166 193.04327942293702z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M774.9 542.78 a139.63 139.63 0 1 0 279.26 0 a139.63 139.63 0 1 0 -279.26 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1304.069%2c469.109C1326.274%2c468.209%2c1347.198%2c458.762%2c1359.01%2c439.938C1371.637%2c419.815%2c1375.425%2c394.448%2c1363.982%2c373.628C1352.157%2c352.113%2c1328.594%2c338.86%2c1304.069%2c339.976C1281.174%2c341.018%2c1264.754%2c359.06%2c1252.909%2c378.681C1240.513%2c399.216%2c1229.023%2c423.85%2c1240.835%2c444.727C1252.758%2c465.801%2c1279.876%2c470.089%2c1304.069%2c469.109' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M127.53118098930202 360.1862848323867L32.3534223132564 392.95861531556926 65.12575279643893 488.13637399161485 160.30351147248456 455.36404350843236z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M701.4589822596724 418.76384225491245L627.3563235248796 427.86250466940174 678.05564651401 534.4671615643462z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M347.47 335.38 a102.14 102.14 0 1 0 204.28 0 a102.14 102.14 0 1 0 -204.28 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M-23.57 372.42 a101.04 101.04 0 1 0 202.08 0 a101.04 101.04 0 1 0 -202.08 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M98.46917721273377 553.0497123740521L61.14764707686262 455.823802339454 1.2432671781356532 590.3712425099233z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M837.6798193978472 71.47858546233797L740.6326000621607 195.69336177865614 961.8945957141653 168.52580479802438z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M505.30829196217996-76.6237400495515L433.957033425644 11.48772623241409 522.0684997076096 82.83898476895006 593.4197582441456-5.272481513015535z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M492.63855337263624 199.82743188451758L465.8041086563703 263.0454219548993 574.0483161200759 271.68809399410736z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M454.92592795672914 557.6203190807731L395.7873159397918 459.19714048629663 297.3641373453154 518.335752503234 356.50274936225264 616.7589310977104z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M831.4184231139951 451.49037589383215L911.2645809117197 569.8671729304476 949.7952201506106 371.6442180961076z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1027'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
background-size: cover;
background-color: #29292b;/* this is probably redundant as the SVG has a color in the background */
overflow: hidden;
position: fixed;
z-index: -1;
filter: blur(2.5px);
width: 100vw;
height: 100vh;
}
</style>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="x.css">
</head>
<body>
<div class="front">
<div>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
</div>
</div>
</body>
我有一个带有 SVG 背景的简单网页。我想稍微模糊一下，所以我在背景上放置了一个 div，应该包括所有内容。
但是，无论我在用户向下滚动时尝试过什么，div 设置模糊都会向上滚动，留下一部分背景不模糊。
我将我的内容设置在模糊 div 中，并将模糊 div 的最小高度设置为 100vh，因为我认为这将使其与人们使用的任何尺寸的屏幕保持一致查看页面。
解决这个问题并使模糊 div 保持不变的正确方法是什么？
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #29292b;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1027%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M633.389334817045 59.875956388694625L531.5846329373846 176.98886913760924 648.6975456862992 278.7935710172696 750.5022475659596 161.68065826835496z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1264.189%2c364.83C1313.567%2c363.088%2c1361.23%2c343.326%2c1386.949%2c301.139C1413.732%2c257.207%2c1417.279%2c201.28%2c1390.785%2c157.174C1364.981%2c114.217%2c1314.3%2c97.05%2c1264.189%2c96.778C1213.511%2c96.503%2c1162.8%2c113.288%2c1135.194%2c155.788C1105.053%2c202.191%2c1096.398%2c263.273%2c1125.456%2c310.362C1153.419%2c355.677%2c1210.974%2c366.707%2c1264.189%2c364.83' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1176.320425197103 225.26338325118923L1047.2482002767379 227.51634731760367 1049.5011643431521 356.588572237969 1178.5733892635176 354.33560817155455z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M774.447%2c470.872C810.854%2c468.438%2c832.589%2c434.044%2c849.689%2c401.811C865.384%2c372.227%2c876.723%2c337.986%2c860.487%2c308.695C843.856%2c278.691%2c808.74%2c265.163%2c774.447%2c266.068C741.77%2c266.93%2c713.652%2c285.572%2c695.927%2c313.037C676.266%2c343.502%2c663.35%2c380.725%2c679.5%2c413.188C697.179%2c448.724%2c734.844%2c473.519%2c774.447%2c470.872' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1291.35 403.11 a95.55 95.55 0 1 0 191.1 0 a95.55 95.55 0 1 0 -191.1 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1099.954%2c89.29C1131.364%2c89.445%2c1163.523%2c77.431%2c1178.52%2c49.833C1193.003%2c23.18%2c1182.834%2c-8.36%2c1167.114%2c-34.303C1152.092%2c-59.093%2c1128.936%2c-80.315%2c1099.954%2c-79.822C1071.628%2c-79.34%2c1051.197%2c-56.386%2c1036.635%2c-32.085C1021.516%2c-6.854%2c1009.117%2c22.983%2c1022.722%2c49.062C1037.112%2c76.645%2c1068.843%2c89.136%2c1099.954%2c89.29' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1142.4892192091047 338.3186580652039L1039.1426113136092 298.64761215121604 999.4715653996212 401.9942200467116 1102.8181732951168 441.6652659606995z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M266.17296675779653 305.0825534071096L353.1760173894231 342.0131573336442 365.07039796341166 193.04327942293702z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M774.9 542.78 a139.63 139.63 0 1 0 279.26 0 a139.63 139.63 0 1 0 -279.26 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1304.069%2c469.109C1326.274%2c468.209%2c1347.198%2c458.762%2c1359.01%2c439.938C1371.637%2c419.815%2c1375.425%2c394.448%2c1363.982%2c373.628C1352.157%2c352.113%2c1328.594%2c338.86%2c1304.069%2c339.976C1281.174%2c341.018%2c1264.754%2c359.06%2c1252.909%2c378.681C1240.513%2c399.216%2c1229.023%2c423.85%2c1240.835%2c444.727C1252.758%2c465.801%2c1279.876%2c470.089%2c1304.069%2c469.109' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M127.53118098930202 360.1862848323867L32.3534223132564 392.95861531556926 65.12575279643893 488.13637399161485 160.30351147248456 455.36404350843236z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M701.4589822596724 418.76384225491245L627.3563235248796 427.86250466940174 678.05564651401 534.4671615643462z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M347.47 335.38 a102.14 102.14 0 1 0 204.28 0 a102.14 102.14 0 1 0 -204.28 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M-23.57 372.42 a101.04 101.04 0 1 0 202.08 0 a101.04 101.04 0 1 0 -202.08 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M98.46917721273377 553.0497123740521L61.14764707686262 455.823802339454 1.2432671781356532 590.3712425099233z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M837.6798193978472 71.47858546233797L740.6326000621607 195.69336177865614 961.8945957141653 168.52580479802438z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M505.30829196217996-76.6237400495515L433.957033425644 11.48772623241409 522.0684997076096 82.83898476895006 593.4197582441456-5.272481513015535z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M492.63855337263624 199.82743188451758L465.8041086563703 263.0454219548993 574.0483161200759 271.68809399410736z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M454.92592795672914 557.6203190807731L395.7873159397918 459.19714048629663 297.3641373453154 518.335752503234 356.50274936225264 616.7589310977104z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M831.4184231139951 451.49037589383215L911.2645809117197 569.8671729304476 949.7952201506106 371.6442180961076z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1027'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
@font-face {
font-family: Overpass,Helvetica,Arial,sans-serif;
font-display: swap;
}
}
.body::before {
opacity: 0.75;
}
.blurdiv {
background: inherit;
overflow: hidden;
z-index: 1;
min-height: 100vh !important;
}
.blurdiv:before{
content: "";
position: absolute;
background: inherit;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: blur(2.5px);
}
.front {
position: relative;
z-index: 2 !important;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="x.css">
</head>
<body>
<div class="blurdiv" >
<div class="front">
<div>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
</div>
</div>
</div>
</body>
</html>
由于背景纯粹是装饰性的，出于可访问性原因，将其从 HTML 主体中删除并仅通过 CSS 样式插入是很有用的。
给定的代码有几个 'layers' 背景模糊 div 及其伪元素。我们可以通过删除背景并将伪元素直接放在主体上来插入背景。
我们希望背景在视口中保持固定并始终覆盖它，而不管用户是否滚动，因此这个伪元素的位置是固定的，并且具有完整的视口高度和宽度。
SVG 已经包含蓝色背景，所以我们不需要在主体上设置任何背景颜色。它也已经是一个重复的模式，因此不必设置或取消设置。
<style>
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
@font-face {
font-family: Overpass,Helvetica,Arial,sans-serif;
font-display: swap;
}
}
body::before {
content: '';
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1027%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M633.389334817045 59.875956388694625L531.5846329373846 176.98886913760924 648.6975456862992 278.7935710172696 750.5022475659596 161.68065826835496z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1264.189%2c364.83C1313.567%2c363.088%2c1361.23%2c343.326%2c1386.949%2c301.139C1413.732%2c257.207%2c1417.279%2c201.28%2c1390.785%2c157.174C1364.981%2c114.217%2c1314.3%2c97.05%2c1264.189%2c96.778C1213.511%2c96.503%2c1162.8%2c113.288%2c1135.194%2c155.788C1105.053%2c202.191%2c1096.398%2c263.273%2c1125.456%2c310.362C1153.419%2c355.677%2c1210.974%2c366.707%2c1264.189%2c364.83' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1176.320425197103 225.26338325118923L1047.2482002767379 227.51634731760367 1049.5011643431521 356.588572237969 1178.5733892635176 354.33560817155455z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M774.447%2c470.872C810.854%2c468.438%2c832.589%2c434.044%2c849.689%2c401.811C865.384%2c372.227%2c876.723%2c337.986%2c860.487%2c308.695C843.856%2c278.691%2c808.74%2c265.163%2c774.447%2c266.068C741.77%2c266.93%2c713.652%2c285.572%2c695.927%2c313.037C676.266%2c343.502%2c663.35%2c380.725%2c679.5%2c413.188C697.179%2c448.724%2c734.844%2c473.519%2c774.447%2c470.872' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1291.35 403.11 a95.55 95.55 0 1 0 191.1 0 a95.55 95.55 0 1 0 -191.1 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1099.954%2c89.29C1131.364%2c89.445%2c1163.523%2c77.431%2c1178.52%2c49.833C1193.003%2c23.18%2c1182.834%2c-8.36%2c1167.114%2c-34.303C1152.092%2c-59.093%2c1128.936%2c-80.315%2c1099.954%2c-79.822C1071.628%2c-79.34%2c1051.197%2c-56.386%2c1036.635%2c-32.085C1021.516%2c-6.854%2c1009.117%2c22.983%2c1022.722%2c49.062C1037.112%2c76.645%2c1068.843%2c89.136%2c1099.954%2c89.29' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1142.4892192091047 338.3186580652039L1039.1426113136092 298.64761215121604 999.4715653996212 401.9942200467116 1102.8181732951168 441.6652659606995z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M266.17296675779653 305.0825534071096L353.1760173894231 342.0131573336442 365.07039796341166 193.04327942293702z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M774.9 542.78 a139.63 139.63 0 1 0 279.26 0 a139.63 139.63 0 1 0 -279.26 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1304.069%2c469.109C1326.274%2c468.209%2c1347.198%2c458.762%2c1359.01%2c439.938C1371.637%2c419.815%2c1375.425%2c394.448%2c1363.982%2c373.628C1352.157%2c352.113%2c1328.594%2c338.86%2c1304.069%2c339.976C1281.174%2c341.018%2c1264.754%2c359.06%2c1252.909%2c378.681C1240.513%2c399.216%2c1229.023%2c423.85%2c1240.835%2c444.727C1252.758%2c465.801%2c1279.876%2c470.089%2c1304.069%2c469.109' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M127.53118098930202 360.1862848323867L32.3534223132564 392.95861531556926 65.12575279643893 488.13637399161485 160.30351147248456 455.36404350843236z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M701.4589822596724 418.76384225491245L627.3563235248796 427.86250466940174 678.05564651401 534.4671615643462z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M347.47 335.38 a102.14 102.14 0 1 0 204.28 0 a102.14 102.14 0 1 0 -204.28 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M-23.57 372.42 a101.04 101.04 0 1 0 202.08 0 a101.04 101.04 0 1 0 -202.08 0z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M98.46917721273377 553.0497123740521L61.14764707686262 455.823802339454 1.2432671781356532 590.3712425099233z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M837.6798193978472 71.47858546233797L740.6326000621607 195.69336177865614 961.8945957141653 168.52580479802438z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M505.30829196217996-76.6237400495515L433.957033425644 11.48772623241409 522.0684997076096 82.83898476895006 593.4197582441456-5.272481513015535z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M492.63855337263624 199.82743188451758L465.8041086563703 263.0454219548993 574.0483161200759 271.68809399410736z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M454.92592795672914 557.6203190807731L395.7873159397918 459.19714048629663 297.3641373453154 518.335752503234 356.50274936225264 616.7589310977104z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M831.4184231139951 451.49037589383215L911.2645809117197 569.8671729304476 949.7952201506106 371.6442180961076z' fill='rgba(28%2c 142%2c 74%2c 0.87)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1027'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
background-size: cover;
background-color: #29292b;/* this is probably redundant as the SVG has a color in the background */
overflow: hidden;
position: fixed;
z-index: -1;
filter: blur(2.5px);
width: 100vw;
height: 100vh;
}
</style>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="x.css">
</head>
<body>
<div class="front">
<div>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
<h6 class="is-size-1 has-text-white p-3">example text</h6>
</div>
</div>
</body>