CSS reveal rest of element outside of mask

Question

I have a single element with a non-repeating background-image at background-position: 4px 4px. The image is an avatar and to it's right is a single paragraph with margin-left: 120px so the text doesn't flow over the background-image. I've already accomplished the effect on an image element however to solidify my comprehension of CSS masks I wanted to determine how to apply this same effect on a background-image. Here is my current code (fuchsia used only for my debugging and now here to help visualize the problem):

/***
-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;

Repeating Mask Overflow

Setting mask-repeat: no-repeat; hides everything else (e.g. the child paragraph element) and most other mask-repeat values simply repeat the circle effect as demonstrated in the sample image. I've been going through Mozilla Developer Network's Mask documentation though nothing seems to help. Sure, I could mess around with CSS generated content however I wouldn't learn anything and limit my own design capabilities.

How do I only mask part of an element using CSS without hiding the rest of the element or it's child elements?

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

yes but the HTML is also important, we need a runnable code to better see things — Temani Afif, Apr 29 '19 at 23:06
@TemaniAfif Okay, that stands alone. I removed all other nodes in the DOM to ensure it'll render with *just* that CSS. — John, Apr 29 '19 at 23:13

Temani Afif · Accepted Answer · 2019-04-29T23:31:27.963

2

Why not using multiple background to achieve the same effect without affecting the text nodes:

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

Another syntax for the gradient. Easier but not supported on Safari like the above one.

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

edited Apr 29 '19 at 23:31

answered Apr 29 '19 at 23:25

Temani Afif

245,468
26
309
415

Okay, so the image stretches (`background-size:100px 100px;` should be for the avatar. The second `background-image` containing the mask doesn't appear. I'm working on it though! – John Apr 29 '19 at 23:43
@John share the code you are trying here: https://jsfiddle.net/ . you should pay attention to the order and the values – Temani Afif Apr 29 '19 at 23:48
BAM! It works! My platform applies the avatar `background-image` via a style attribute so that discombobulated things a bit. I did use multiple-background images very recently and I'm not sure why I did not consider it again. Thank you *very* much! – John Apr 29 '19 at 23:58
I actually was trying to smooth the edges of some images for a client though obviously masks should work on most images. I see you've been poking around and am a little upset that the theme functionality is as broken as it is (at the end of a project) and on top of that I'm transitioning to CSS variable theme (non-plural for the moment). I'm just happy someone knows how to click on links, so many people miss those things. :-) – John Mar 08 '20 at 00:36

CSS reveal rest of element outside of mask

1 Answers1