css - 使用整个 SVG 的 CSS 剪辑路径
问题描述
我正在尝试使用 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,该 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
可能我理解错了,但我在网上尝试了这个文档,但找不到答案。
任何帮助将不胜感激
解决方案
不幸的是,我无法按照我定义的方式找到任何解决此问题的方法。但是使用 JS 和多边形剪辑路径,我能够重新创建我正在寻找的效果。
这里如何:
HTML
<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>
CSS
* {
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%);
}
Javascript
function setClipPath(target, source) {
let sbox = source.getBoundingClientRect();
let [xmin, ymin, xmax, ymax] = [ sbox.left, sbox.top, sbox.right, sbox.bottom];
target.style.clipPath = `polygon(${xmin}px ${ymin}px, ${xmin}px ${ymax}px, ${xmax}px ${ymax}px, ${xmax}px ${ymin}px
)`;
}
let blur_background = document.querySelector(".glass .bg_blur");
let text_overlay = document.querySelector(".glass .title");
setClipPath(blur_background, text_overlay);
window.onresize = function(event) {
setClipPath(blur_background, text_overlay);
}
这里我准备了一支笔来展示效果 https://codepen.io/Kerruba/pen/MBveoW?editors=0101
有关如何改进此问题或您发现的宏观问题的任何评论,请在评论中告诉我
推荐阅读
- powershell - 在 foreach 循环中将逗号分隔的值拆分为换行符 - PowerShell
- javascript - 为 localStorage 模块定义一个 get/set 方法 adhoc
- java - Java通过另一种方式选择列表属性
- php - 将多维数组转换为字符串并推送到新数组
- linux - Linux 配置文件中注释掉的行
- python - 使用 skimage.color.rgb2lab 将 RGB 转换为 Lab
- javascript - 如何在 React-native 中实现优雅的登录?
- python - plotly.plot 不会绘制所有数据框
- javascript - 是否可以创建具有动态状态的减速器?
- angular - 选择要在 Highcharts 上显示的数据