CSS在遮罩之外显示元素的其余部分

Question

我有一个元素，在background-image处有一个非重复的background-position: 4px 4px。图像是一个化身，在右边是带有margin-left: 120px的单个段落，因此文本不会流过background-image。我已经完成了对图像元素的效果，但是为了巩固对CSS蒙版的理解，我想确定如何在background-image上应用相同的效果。这是我当前的代码（紫红色仅用于调试，现在用于帮助可视化问题）：

/***
-webkit- prefixes automatically appended by my system software.
Testing with Waterfox first, Chrome second.
***/
background-color: #f0f;
background-image: url(avatar.png);
mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
mask-position: 4px 4px;
mask-size: 100px 100px;

设置mask-repeat: no-repeat;会隐藏其他所有内容（例如子段落元素），而其他大多数mask-repeat值只会重复示例效果中所示的圆形效果。我一直在浏览Mozilla开发人员网络的Mask文档，尽管似乎没有任何帮助。当然，我可以弄乱CSS生成的内容，但是我不会学习任何内容并限制自己的设计能力。

如何仅使用CSS掩盖部分元素而不隐藏其余元素或其子元素？

---

这里的每个注释请求都是XML和CSS。

<section class="preface">
<div class="synopsis"><p>Some text.</p></div>
</section>

.preface {overflow: auto;}

.preface .synopsis
{
 background-image: url(images/avatars/john.gif);
 background-position: 4px 4px;
 background-repeat: no-repeat;
 float: left;
 height: 108px;
 mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
 mask-position: 4px 4px;
 mask-size: 100px 100px;
 min-height: 108px;
 overflow: auto;
 position: relative;
 width: 75%;
}

Answer 1

为什么不使用多个背景来达到相同的效果而不影响文本节点：

.box {
  background:
    radial-gradient(circle 50px,transparent 70%,#224e7c 100%) right -54px top 0/200% 100%,
    url(https://picsum.photos/id/1074/110/110) 4px 4px no-repeat;
  height:120px;
  font-size:50px;
  padding-left:120px;
}

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

渐变的另一种语法。比较容易，但not supported on Safari就像上面的一样。

.box {
  background:
    radial-gradient(circle 50px at 54px 50% ,transparent 70%,#224e7c 100%),
    url(https://picsum.photos/id/1074/110/110) 4px 4px no-repeat;
  height:120px;
  font-size:50px;
  padding-left:120px;
}

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