CSS 显示遮罩外的其余元素

Question

我有一个元素在 background-position: 4px 4px 处有一个不重复的 background-image。该图像是一个头像，右侧是带有 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 Developer Network 的 Mask 文档，但似乎没有任何帮助。当然，我可以随意处理 CSS 生成的内容，但我不会 学到任何东西 并限制我自己的设计能力。

如何使用 CSS 仅屏蔽元素的一部分而不隐藏元素的其余部分或其子元素？

.preface {
  overflow: auto;
}

.preface .synopsis {
  background-color: #f0f;
  background-image: url(https://picsum.photos/id/1074/110/110);
  background-position: 4px 4px;
  background-repeat: no-repeat;
  float: left;
  height: 108px;
  -webkit-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%);
  -webkit-mask-position: 4px 4px;
  -webkit-mask-size: 100px 100px;
  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%;
}

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

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>

渐变的另一种语法。更简单，但像上面的那样。

.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>

CSS 显示遮罩外的其余元素

CSS reveal rest of element outside of mask

css

css-mask