CSS揭示掩蔽外的元素

Question

CSS揭示掩蔽外的元素

3

我有一个单一元素，它有一个不重复的 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 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>

- John

你能分享你的完整代码吗？ - Temani Afif

是的，但HTML也很重要，我们需要可运行的代码来更好地查看事物。 - Temani Afif

@TemaniAfif 好的，它可以独立存在。我已经从DOM中删除了所有其他节点，以确保它只使用那个CSS进行渲染。 - John

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

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

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

另一种渐变的语法。更简单，但像上面那个一样不支持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>