我想制作一个网站启动页面。该页面将有一个背景，该背景将在左侧被一个倾斜的 div 切断，比如说与水平方向成恒定的 110 度(或等同，继续阅读)。这个 div 会模糊它背后的背景，并允许在上面放置内容，比如文本。查看YouTube Brand Resources page : 我不想在左侧使用纯白色背景，而是希望它模糊位于其下方的背景图片。
我还没有找到一种方法来将我找到的所有信息以一种有效且受大多数浏览器支持的方式放在一起。例如，我最近尝试了一个与父容器共享背景的倾斜 div，如 this post被问到，但 CSS 剪辑路径通常还不被支持，对于我的用例，白色 div 不会剪切(要清楚，这个解决方案以倾斜的背景图像结束)。
使用 SVG clip paths and filters (见下文)让我接近，但正如你所看到的，我不知道如何确保图像和 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: cover
background-repeat: no-repeat
background-color: lightgrey
background-attachment: fixed
svg
position: absolute
width: inherit
height: inherit
有什么想法吗？
最佳答案
你可以考虑倾斜变换而不需要clip-path。这是一个基本示例，其中的诀窍是指定 background-position 的正确值以创建一幅图像的错觉。
.box {
height:300px;
background-image:url(https://picsum.photos/600/800?image=1069);
background-position:left center;
background-size:cover;
position:relative;
overflow:hidden;
}
.skew,
.skew::before{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform-origin:top left;
transform:skewY(30deg);
overflow:hidden;
background-image:inherit;
background-position:inherit;
background-size:0 0;
}
.skew::before {
content:"";
transform:skewY(-30deg);
filter:blur(10px);
background-size:cover;
}
/*to illustrate the separation*/
.skew {
border-top:1px solid;
}
/**/
.container {
position:relative;
z-index:1;
margin-top:150px;
padding-left:50px;
}
body {
margin:0;
}<div class="box">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>
<div class="box" style="background-image:url(https://picsum.photos/600/800?image=3)">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>如果您希望倾斜响应，您可以添加一个小的 JS 代码来调整 Angular 并始终覆盖 iamge 的一半:
var w = window.innerWidth;
var h = 300; /*the height of the box*/
document.querySelector('.box .skew').style.transform="skewY("+(Math.atan(h/w)*180/Math.PI )+"deg)";
document.querySelector('.box .skew span').style.transform="skewY(-"+(Math.atan(h/w)*180/Math.PI )+"deg)";
window.onresize = function(event) {
w = window.innerWidth;
document.querySelector('.box .skew').style.transform="skewY("+(Math.atan(h/w)*180/Math.PI )+"deg)";
document.querySelector('.box .skew span').style.transform="skewY(-"+(Math.atan(h/w)*180/Math.PI )+"deg)";
};.box {
height:300px;
background-image:url(https://picsum.photos/600/800?image=1069);
background-position:left center;
background-size:cover;
position:relative;
overflow:hidden;
}
.skew,
.skew span{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform-origin:top left;
transform:skewY(30deg);
overflow:hidden;
background-image:inherit;
background-position:inherit;
background-size:0 0;
}
.skew span{
transform:skewY(-30deg);
filter:blur(10px);
background-size:cover;
}
/*to illustrate the separation*/
.skew {
border-top:1px solid;
}
/**/
.container {
position:relative;
z-index:1;
margin-top:150px;
padding-left:50px;
}
body {
margin:0;
}<div class="box">
<div class="skew"><span></span></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>关于html - 在 CSS/SVG 中是否有一种普遍支持的方法来制作倾斜的 "frosted glass"效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54018409/