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