我正在寻找一个网站启动页面.页面将有一个背景,将在左侧切断一个倾斜的div,例如与水平方向保持恒定的110度(或等效,保持读数).这个div会模糊它背后的背景,并允许将内容放在它上面,就像文本一样.请参阅YouTube品牌资源页面:我希望这样可以模糊位于其下方的背景图片,而不是在左侧显示纯白色背景.

我还没有找到一种方法可以将我发现的所有信息以一种有效的方式放在一起,并得到大多数浏览器的支持.例如,我最近尝试了一个与父容器共享背景的倾斜div,就像这篇帖子所询问的那样,但CSS剪辑路径还没有得到普遍支持,并且白色div不会为我的用例剪切它(很明显,这个解决方案以倾斜的背景图像结束).

使用SVG剪辑路径和过滤器(见下文)让我接近,但正如你所看到的,我不知道如何确保图像和SVG填满屏幕并与背后的背景对齐.

萨斯:

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;
}

  

  

    
some text
    
Lorem ipsum
  



  

  

    
some text
    
Lorem ipsum