CSS показывает остаток элемента вне маски - PullRequest
Новая
       13

CSS показывает остаток элемента вне маски

2 голосов
/ 30 апреля 2019

У меня есть один элемент с неповторяющимся 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;

Repeating Mask Overflow

Установка mask-repeat: no-repeat; скрывает все остальное (например, дочерний элемент абзаца), а большинство других значений mask-repeat просто повторяют эффект окружности, как показано на примере изображения. Я просматривал документацию по маске в Mozilla Developer Network, хотя, похоже, ничего не помогло. Конечно, я мог бы возиться с контентом, созданным с помощью CSS, однако я бы не стал изучать что-либо и ограничивал бы свои собственные возможности дизайна.

Как замаскировать только часть элемента с помощью CSS, не скрывая остальную часть элемента или его дочерние элементы?

Для каждого комментария здесь есть XML и CSS. 

<section class="preface">
<div class="synopsis"><p>Some text.</p></div>
</section>

.preface {overflow: auto;}

.preface .synopsis
{
 background-image: url(images/avatars/john.gif);
 background-position: 4px 4px;
 background-repeat: no-repeat;
 float: left;
 height: 108px;
 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%;
}

1 Ответ

1 голос
/ 30 апреля 2019

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

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