CSS показывает остальную часть элемента за пределами маски

У меня есть один элемент с неповторяющимся 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, но, похоже, ничего не помогает. Конечно, я мог бы возиться с содержимым, созданным с помощью 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>


css css-mask
person John    schedule 29.04.2019    source источник
comment
можете ли вы поделиться своим полным кодом   -  person Temani Afif    schedule 30.04.2019
comment
да, но HTML также важен, нам нужен исполняемый код, чтобы лучше видеть вещи   -  person Temani Afif    schedule 30.04.2019
comment
@TemaniAfif Хорошо, это само по себе. Я удалил все остальные узлы в DOM, чтобы убедиться, что он будет отображаться с использованием только этого CSS.   -  person John    schedule 30.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Почему бы не использовать несколько фонов для достижения того же эффекта, не затрагивая текстовые узлы:

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

person Temani Afif    schedule 29.04.2019
comment
Итак, изображение растягивается (background-size:100px 100px; должно быть для аватара. Второе background-image, содержащее маску, не появляется. Я над этим работаю! - person John; 30.04.2019
comment
@John поделитесь кодом, который вы пытаетесь использовать здесь: jsfiddle.net . вы должны обратить внимание на порядок и значения - person Temani Afif; 30.04.2019
comment
БАМ! Оно работает! Моя платформа применяет аватар background-image через атрибут стиля, так что это немного сбивает с толку. Совсем недавно я использовал несколько фоновых изображений, и я не уверен, почему я не рассмотрел это снова. Большое спасибо! - person John; 30.04.2019
comment
На самом деле я пытался сгладить края некоторых изображений для клиента, хотя очевидно, что маски должны работать на большинстве изображений. Я вижу, вы ковырялись, и я немного расстроен тем, что функциональность темы так же сломана, как она есть (в конце проекта), и вдобавок ко всему я перехожу на переменную тему CSS (не во множественном числе для момент). Я просто счастлив, что кто-то знает, как нажимать на ссылки, так что многие люди скучают по этим вещам. :-) - person John; 08.03.2020