我想制作一个网站启动页面。该页面将有一个背景图,左侧将以斜角状切割一块区域,与水平线保持110度倾斜(或相当的角度,继续阅读)。这个斜角状的区域将会模糊背景,并允许在其上添加内容,如文本。参见YouTube品牌资源页面:不同于左侧纯白背景图,我想要它可以使其下方的背景图片变得模糊。
但我还没有找到一种方法可以将我发现的所有信息结合在一起,以便能够适应大多数浏览器并且可行。例如,最近我尝试了一个共享父容器背景的斜角状区域,就像这篇文章中提到的,但CSS裁剪路径目前还不被广泛支持,而一个白色区域对于我的用例来说不够好(明确一下,这种解决方案的结束点是一个斜角背景图)。
使用SVG裁剪路径和滤镜(见下文)可以让我接近目标,但是你可以看到,我不知道如何确保图像和SVG填充屏幕并与其背景对齐。
有什么想法吗?
但我还没有找到一种方法可以将我发现的所有信息结合在一起,以便能够适应大多数浏览器并且可行。例如,最近我尝试了一个共享父容器背景的斜角状区域,就像这篇文章中提到的,但CSS裁剪路径目前还不被广泛支持,而一个白色区域对于我的用例来说不够好(明确一下,这种解决方案的结束点是一个斜角背景图)。
使用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>
Sass:
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: cover
background-repeat: no-repeat
background-color: lightgrey
background-attachment: fixed
svg
position: absolute
width: inherit
height: inherit
有什么想法吗?