我正在寻找一个网站启动页面.页面将有一个背景,将在左侧切断一个倾斜的div,例如与水平方向保持恒定的110度(或等效,保持读数).这个div会模糊它背后的背景,并允许将内容放在它上面,就像文本一样.请参阅YouTube品牌资源页面:我希望这样可以模糊位于其下方的背景图片,而不是在左侧显示纯白色背景.
我还没有找到一种方法可以将我发现的所有信息以一种有效的方式放在一起,并得到大多数浏览器的支持.例如,我最近尝试了一个与父容器共享背景的倾斜div,就像这篇帖子所询问的那样,但CSS剪辑路径还没有得到普遍支持,并且白色div不会为我的用例剪切它(很明显,这个解决方案以倾斜的背景图像结束).
使用SVG剪辑路径和过滤器(见下文)让我接近,但正如你所看到的,我不知道如何确保图像和SVG填满屏幕并与背后的背景对齐.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<div class="splash">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<filter id="blur" x="0" y="0">
<feGaussianBlur stdDeviation="1"></feGaussianBlur>
</filter>
<clipPath id="clip">
<polygon points="0,0 100,100 0,100"></polygon>
</clipPath>
<image clip-path="url('#clip')" filter="url('#blur')" x="0" y="0" width="100" height="100" xlink:href="https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg"></image>
</svg>
</div>
</body>
</html>
萨斯:
html, body
position: relative
margin: 0
overflow-x: hidden
height: 100%
.splash
position: absolute
width: 100%
height: 100%
overflow: hidden
background-image: url("https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg")
background-size: …