Подскажите как возможно сделать прозрачные буквы на зеленом фоне, чтобы был виден второй фон в буквах (зеленый фон должен в буквах отсутствовать, он только вокруг букв)
Пробовал с помощью,
text-transform: uppercase;
mix-blend-mode: multiply;
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПодскажите как возможно сделать прозрачные буквы на зеленом фоне, чтобы был виден второй фон в буквах (зеленый фон должен в буквах отсутствовать, он только вокруг букв)
Пробовал с помощью,
text-transform: uppercase;
mix-blend-mode: multiply;
Используя 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;">
Для прорезания верхнего фона по контурам букв, можно воспользоваться 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>
Полная адаптивность, работает одинаково во всех современных браузерах.
Легко поддается переналадке ( все размеры абсолютные и не зависят друг от друга)
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>
Текст к делу не относится
.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>
что надо фон прорезать первый
? вы хотя бы покажите похожее
11 янв 2022 в 2:28