是否有普遍支持的方法来制作倾斜的“磨砂玻璃"杯?CSS/SVG中的效果?

本文介绍了是否有普遍支持的方法来制作倾斜的“磨砂玻璃"杯?CSS/SVG中的效果?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在寻找一个网站初始页面.该页面将具有一个背景，该背景将在左侧用倾斜的div切除，例如与水平方向保持恒定的110度(或等价，请继续阅读).该div将模糊其背后的背景，并允许在其上放置内容，例如文本.请参见 YouTube品牌资源页面:左，我想使位于其下方的背景图片变得模糊.

I'm looking to make a website splash page. The page will have one background that will be cut off on the left side with a slanted div, say at a constant 110 degrees from the horizontal (or equivalent, keep reading). This div will blur the background behind it and will allow for content to be put on it, like text. See the YouTube Brand Resources page: instead of having a plain white background on the left, I would like that to blur the background picture that sits underneath it.

我还没有找到一种将所有找到的信息以一种有效且大多数浏览器都支持的方式整合在一起的方法.例如，我最近尝试了与父容器共享背景的倾斜div，例如提出了疑问，但是CSS剪辑路径尚不普遍支持，白色div不会剪切供我使用情况(很明显，此解决方案以歪斜的背景图片结束).

I've not yet found a way to put all of the information I've found together in a way that works and is supported by most browsers. For example, I recently tried a skewed div that shared a background with the parent container, like this post asked about, but CSS clip paths aren't commonly supported yet, and a white div won't cut it for my use case (to be clear, this solution ends with a skewed background image).

使用 SVG剪辑路径和过滤器(如下所示)可以使我接近，但您可以看，我不知道如何确保图像和SVG充满屏幕并与背景保持一致.

Using SVG clip paths and filters (see below) gets me close, but as you can see, I don't know how to make sure the image and the SVG fills the screen and lines up with the background behind it.

<!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 的正确值以创建一张图像的错觉.

You can consider skew transform without the need of clip-path. here is a basic example where the trick is to specify the correct value of background-position to create the illusion of one image.

.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代码来调整角度，并始终覆盖一半的iamge:

In case you want the skew to be responsive you can add a small JS code to adjust the angle and always cover half the 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>

这篇关于是否有普遍支持的方法来制作倾斜的“磨砂玻璃"杯?CSS/SVG中的效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！