4

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

Пробовал с помощью,

text-transform: uppercase;
mix-blend-mode: multiply;

Но зеленый цвет обесцвечивается Пример

11

4 ответа 4

6

Используя canvas (XOR), и функцию переноса строк, вполне можно реализовать что-то похожее. Работает это быстро, и в принципе может быть использовано в адаптиве, придется лишь выбирать размеры канваса и шрифта.

const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
  const words = text.split(' ');
  let line = '';
  for (const [index, w] of words.entries()) {
    const testLine = line + w + ' ';
    const metrics = ctx.measureText(testLine);
    const testWidth = metrics.width;
    if (testWidth > maxWidth && index > 0) {
      ctx.fillText(line, x, y);
      line = w + ' ';
      y += lineHeight;
    } else {
      line = testLine;
    }
  }
  ctx.fillText(line, x, y);
}

const drawText = (text, fontSize, width, height, background) => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.setAttribute('width', width)
  canvas.setAttribute('height', height)
  ctx.fillStyle = background;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = 'xor';
  ctx.font = `${fontSize}px Courier bold`;
  wrapText(ctx, text, 0, fontSize, width, fontSize * 1.2)
  document.body.appendChild(canvas)
}

drawText('#котики #cats #pets', 60, 500, 200, '#39B085D9')
img {
    z-index: -1;
  }
  canvas {
    display: block-inline;
    margin-top: -5px;
    padding:0;
  }
<img src="https://loremflickr.com/640/360" style="position: absolute;">

4
  • вроде бы(если я верно понял) то это как раз svg умеет : jsfiddle.net/njkr4tex/1 11 янв 2022 в 6:37
  • @Айболит в таком случае можно оформить тоже как ответ 11 янв 2022 в 6:43
  • Никогда б не подумал, что это проблематично сделать будет 11 янв 2022 в 6:47
  • @GhostGames тоже думал будет проще, но хорошо что есть решения из которых можно выбирать 11 янв 2022 в 7:01
4

Для прорезания верхнего фона по контурам букв, можно воспользоваться mix-blend-mode:screen;

html {
background:url(https://i.stack.imgur.com/DJwH0.jpg) center/cover;
background-repeat:no-repeat;
min-height:100vh;
position:relative;
}
.text {
position:absolute;
background:#40FFF5;
mix-blend-mode:screen;
font-size:48px;
font-weight:900;
padding:0.2em;
width:10em;
left:0%;
top:15%;

}
<div class="text">Flora truck - это крупнейший авиа экспедитор и один из самых крупных перевозчиков </div>

0
2

Решение SVG + CSS

Полная адаптивность, работает одинаково во всех современных браузерах.

Легко поддается переналадке ( все размеры абсолютные и не зависят друг от друга)

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://i.stack.imgur.com/CYTL9.jpg');
  background-size:cover;
  background-attachment:fixed;
}

.container {
width:100vw;
height:100vh;
}
<div class="container">
<svg viewbox="0 -35  400 240">
  <defs>
    <mask id="mask" x="0" y="0" width="400" height="240">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
       <text  font-size="14px" x="10" y="40" font-family="sans-serif" font-weight="700" >
         <tspan>Flora truck - это крупнейший</tspan>
          <tspan x="14" dy="20">авиа экспедитор и один из</tspan> 
          <tspan x="10" dy="20">самых крупных перевозчиков</tspan> </text>
    </mask>
  </defs>
  <rect x="5" y="25" width="225" height="60" mask="url(#mask)" fill="#31C2BB" fill-opacity="0.8"/>    
</svg>
</div>

0

Текст к делу не относится

.bg{
    background: #3acaca;
    max-width: 320px;
    padding: 10px;
    font-weight: bold;
    color: #42242400;
    font-size: 25px;
    -webkit-text-stroke: 1.5px #585858;
    font-family: sans-serif;
}
<div class="bg">
Разным ресурсам (стили, скрипты, шрифты и т. д.), браузеры обычно назначают разные приоритеты, чтобы в первую очередь загружать самые важные ресурсы. В данном случае браузер определяет приоритет по атрибуту as. Для браузера Chrome можете посмотреть полную таблицу приоритетов.
</div>

7
  • Такое то понятно, это раз и готово, но тут загвоздка, что надо фон прорезать первый 10 янв 2022 в 18:53
  • @GhostGames как понять что надо фон прорезать первый ? вы хотя бы покажите похожее 11 янв 2022 в 2:28
  • В описание написано, необходимо сделать буквы прозрачными , чтобы второй фон был виден, но 1 слой (зеленый) он должен быть вокруг букв. В буквах он должен отсутствовать 11 янв 2022 в 6:39
  • Если б все так просто было )), а так да твой вариант работает если 1 фон, то ок. Но тут нужно чтобы сами буквы были прозрачные и фон на котором они находят тоже прозрачным был. 11 янв 2022 в 6:45
  • А пример , вот codepen.io/rpsthecoder/pen/Zremwz, но опять же только с темными цветами ок работает 11 янв 2022 в 6:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.