3

我有一个不重复的元素background-imageat 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>

4

1 回答 1

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>

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

于 2019-04-29T23:25:35.970 回答