html - 想让背景 SVG 只模糊而不是上面的文本
问题描述
我这里有个情况。我有一个div
包含svg
图形的。里面div
我也有一些文字。默认情况下svg
看起来有点扭曲。所以我用filter:blur()
css 让它变得有点平滑。但问题是div
包括文本在内的所有内容也变得模糊。这是我的代码:
#back-clip{
height: 700px;
background-color:rgb(29, 62, 222); /* For browsers that do not support gradients */
background-image: linear-gradient(to right, rgb(29, 62, 222) , rgb(3, 218, 246));
-webkit-clip-path: polygon(-2px 421px,814px 356px,962px 419px,1920px -2px,-2px -2px);
clip-path: url("#clipPolygon");
filter: blur(1px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" id="back-clip">
<div class="row">
<div class="col-12">
<svg width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="0 700,1219 553,1920 700,1920 0,-2 -2">
</polygon>
</clipPath>
</svg>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="text-light">
<h1>Welcome</h1>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
推荐阅读
- ios - 添加到自定义 UICollectionViewCell 时出现意外的 CAShapeLayer 行为
- android - 使用私有源代码发布 android 库(免费)
- c++ - 文件处理 - 值被添加两次而不是一次
- css - 如何在顺风 CSS 中使用 calc()?
- javascript - Javascript:if 语句在 while/for 循环中不起作用
- python - 在 conda 环境中安装后无法导入包
- c# - 如何更改组合框下拉按钮的颜色
- flutter - 如何在 Flutter 中渲染小部件?
- questdb - 如何在 QuestDB 中通过 SQL 删除几行?
- r - 有没有办法在我在 ggplot 中打印的每个 pdf 上绘制三个图?