Html 背景滤镜模糊与波浪形边框相结合

发布于09月05日

我正在寻找解决方案组合的背景滤镜:模糊(Xxpx)与波浪边框.请参阅所附图像.

我已经try 过SVG Waves和:Being:After省略号，但在我看来，将其与"模糊"配对并非不可能.

有没有人有什么提示？

这段代码在"模糊封面"上画了一条直线:

#css
.blur-filter-over {
    position: absolute; 
    height: calc(100vw*0.105);
    max-height: 230px;
    width: 100%;
    background: linear-gradient(180deg, rgba(70, 60, 92, 0.33) 0%, rgba(96, 96, 96, 0) 100%);
    backdrop-filter: blur(10px);
    border: unset;
    left: 0;
    bottom: 0;
}

#html
    <div class="card card-body ls odd" style="background-image: url({{ MEDIA_URL }});">
    <div class="blur-filter-over">
    <div class="text-over talent">
    <div class="text-over-place">{{address}}</div>
    {{first_name}} {{last_name}}
    </div>
    </div>
    </div>

推荐答案

从my previous answer开始，你可以像下面这样做.我取了答案中的一个代码，在那里我使用MASK来创建波.

.box {
  width:300px;
  height:250px;
  position:relative;
  background: url(https://picsum.photos/id/1069/400/600) center/cover;
}
.box:before{
  content:"";
  position:absolute;
  inset:0;
  -webkit-mask:
    radial-gradient(100% 80% at top   ,#0000 79.5%,#000 80%) left,
    radial-gradient(100% 80% at bottom,#000 79.5%,#0000 80%) right;
  -webkit-mask-size:50.1% 100%;
  -webkit-mask-repeat:no-repeat;
  backdrop-filter:blur(10px);
  background:#0005;
}