css - 我怎样才能使曲线模糊的背景图像叠加

Question

首先对不起。我无法描述我希望我的叠加层看起来如何。

我正在尝试使叠加层看起来像下面的图片。

我尝试了以下代码：

*,*::after,*::before{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        section{
            margin-left: auto;
            padding: 20px 100px;
        }
           .container{
            position: relative;
            min-width: 100%;
            height: 400px;
            background: rgb(0, 64, 255);
            margin: 20px;
            border-radius: 20px;
        }
       
        .developer-overlay{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* background:  linear-gradient(115deg, rgb(255, 255, 255) 0%,rgba(255, 255, 255, 0.801) 35%,rgba(255, 255, 255, 0.356) 80%,transparent 100%); */
            background:  radial-gradient(circle at -100%, #fff 50%, rgba(255, 255, 255, 0.685) 75%, rgba(255, 255, 255, 0.363) 100%);;
            width: 100%;
            height: 100%;
        }

   <section>
        <div class="container">
           <div class="holder">
            <div class="developer-bg"></div>
            <div class="developer-overlay"></div>
          
           </div>
        </div>

    </section>
    

图片

标签： cssbackgroundoverlaylinear-gradients

Answer 1

使用如下面罩：

.box {
  margin:50px;
  border-radius:30px;
  height:200px;
  background:url(https://picsum.photos/id/1024/800/800) center/cover no-repeat;
  -webkit-mask:radial-gradient(100% 150% at right, #fff 40%,transparent 90%); 
}

body {
  background:pink;
}

<div class="box"></div>