Question

我正在尝试使用css中的clip-path属性来掩盖网格中的模糊图像，基本上是为了获得例如在Windows 10以及其他地方看到的玻璃模糊效果。

我拥有的结构是：

<div>
    <div><img src="img/not_blurred.jpg"/></div>
    <div><img src="img/blurred.jpg"/></div>
    <div>
        <span>Some text</span>
    </div>
</div>

要使模糊的图像覆盖包含“某些文本”的div，同时保持与我所想到的基础图片的比例使用SVG clipPath和SVG来覆盖包含“某些文本”的整个div

<div>
    <div><img src="img/not_blurred.jpg"/></div>
    <div><img src="img/blurred.jpg"/></div>
    <div>
        <svg width="100%" height="100%">
            <defs>
                <clipPath id="test" clipPathUnits="objectBoundingBox">
                    <rect width="1" height="1"></rect>
                </clipPath>
            </defs>
        </svg>
        <span>Some text</span>
    </div>
</div>

但是问题是剪切路径没有获得SVG的坐标（0,0），而是页面的（0,0）作为原点。如果您想看看https://codepen.io/Kerruba/pen/MBveoW

，我已经为此制造了一支笔

我可能理解不正确，但是我尝试对此进行在线文档搜索，但找不到答案。

任何帮助将不胜感激

Answer 1

不幸的是，我找不到我定义该问题的方法的任何解决方案。但是使用JS和多边形剪切路径，我可以重新创建想要的效果。

此处：

HTML

import smtplib
import socks    # it is the package SocksiPy or PySocks

socks.setdefaultproxy(socks.SOCKS5, '192.168.1.5', 8080)
socks.wrapmodule(smtplib)

CSS

<div class="grid glass">
    <div class="bg_normal">
        <img src="https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?cs=srgb&dl=above-aerial-aerial-view-991012.jpg&fm=jpg" alt="">
      </div>
      <div class="bg_blur">
        <img src="https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?cs=srgb&dl=above-aerial-aerial-view-991012.jpg&fm=jpg" alt="">
      </div>
      <div class="title">
        <h1>The greatest place ever!</h1>
      </div>
</div>

JavaScript

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.grid {
  min-width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-auto-columns: unset;
  grid-gap: 0;
}


.bg_normal, .bg_blur {
  grid-row: 1 / -1;
  grid-column: 1;
}

.bg_normal img, .bg_blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg_blur img{
   filter: blur(5px);
}

.title {
  grid-row: 2/-2;
  grid-column: 1;
  z-index: 1;
  background: rgba(200, 200, 200, 0.3);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vmax;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  font-family: 'Jura', sans-serif;
  text-shadow: 0 5px 10px HSL(172, 27%, 39%);
}

在这里，我准备了一支笔来显示效果 https://codepen.io/Kerruba/pen/MBveoW?editors=0101

任何有关如何改善此问题或您发现的宏观问题的评论都会在评论中让我知道

使用整个SVG的CSS剪切路径

1 个答案: