图像背景叠加？

Question

有没有办法用纯CSS来达到这个背景？

我知道我可以添加另一张具有原始背景透明性的图像，但是我想最小化发送到浏览器的资源。

我正在尝试使用背景图像：radial-gradient（），但没有结果

.banner {
  width: 300px;
  height: 200px;
  background-image: url(https://picsum.photos/200/300);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  position: relative;
  
}
.banner:after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: radial-gradient(circle, #fff 40%,transparent 40%);
  }

<div class="banner"></banner>