Блог

Я добавляю стиль текста клипа в dom-к-изображению, потому что chrome должен использовать стиль-webkit-фонового клипа, чтобы отобразить эффект текстового клипа, но использование cssText в dom-к-изображению очистит стиль-webkit-фонового клипа.

Это патч, который заменяет фон и добавляет фоновый клип.

 const _serializeToString = XMLSerializer.prototype.serializeToString;
XMLSerializer.prototype.serializeToString = function (node) {
  return _serializeToString
    .call(this, node)
    .replace(
      /background-image:/g,
      '-webkit-background-clip: text; background-image:',  // Add the -webkit-background-clip
    );
};
 

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

Это отображается с помощью текста клипа

 .board-name-gradient {
  background: -webkit-linear-gradient(#ffffff, #b2b2b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  overflow: hidden;
  position: absolute;
  top: 50px;
  width: 300px;
  white-space: nowrap;
}
 

Не нужен клип, и он перезаписан (не визуализирован)

 .board-setup::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: overlay;
  z-index: 3;
}
 

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

 XMLSerializer.prototype.serializeToString = function (node) {
  const value = _serializeToString.call(this, node);

  if (does not have clip text) {
    return value;
  }
  
  return value.replace(
      /background-image:/g,
      '-webkit-background-clip: text; background-image:',  // Add the -webkit-background-clip
    );
};
 

Как я могу заменить фоновый клип, только если стиль должен иметь эффект текста клипа?