Прозрачный текст на SVG, показывающий страницу позади [дубликат]

function insertString(string, insertion, place) {
  return string.replace(string[place] + string[place + 1], string[place] + insertion + string[place + 1])
}

Итак, для вас это будет insertString("foo baz", "bar", 3);

Очевидно, что это будет краска для использования, потому что вы должны каждый раз передавать свою строку в функцию, но на момент я не знаю, как сделать его чем-то более легким, как string.replace(insertion, place). Однако идея все еще стоит.

75
задан web-tiki 22 January 2016 в 11:44
поделиться

11 ответов

Я только что открыл новый способ сделать это во время возиться, я не совсем уверен, как это работает (если кто-то хочет объяснить, пожалуйста).

Кажется, что он работает очень хорошо, и не требует двойного фона или JavaScript.

Вот код: JSFIDDLE

body {
  padding: 0;
  margin: 0;
}

div {
  background: url(http://www.color-hex.com/palettes/26323.png) repeat;
  width: 100vw;
  height: 100vh;
}

body::before {
  content: '$ALPHABET';
  left: 0;
  top: 0;
  position: absolute;
  color: #222;
  background-color: #fff;
  padding: 1rem;
  font-family: Arial;
  z-index: 1;
  mix-blend-mode: screen;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 1rem;
}
<div></div>

38
ответ дан chbchb55 21 August 2018 в 14:20
поделиться
  • 1
    A вы люди слишком быстро: D – Gijs 18 December 2012 в 14:53
  • 2
    О, круто! Я буду проверять автоматическое выравнивание так же быстро, как я возвращаюсь домой! Спасибо! : D – Love Dager 18 December 2012 в 15:26
  • 3
    вам нужно немного изменить код, зависит от ситуации, теперь он может конфликтовать с другими элементами, и этот был написан очень быстро, если у вас есть какие-то вопросы, я их услышу – Gijs 18 December 2012 в 15:32
  • 4
    Да, конечно, но я знаю jQuery, как ладонь моей руки (ладно ... допустим почти). Я, вероятно, сделаю для этого отличный маленький плагин! Также спасибо, отмечены как правильные! – Love Dager 19 December 2012 в 00:38
  • 5
    Не игнорировать ответ, который является действительно хорошим решением, но background-clip:text - это нестандартная опция для Webkit. CSS3 не позволяет значение text для этого атрибута ( см. ). – tanius 17 October 2015 в 14:49
40
ответ дан Gijs 1 November 2018 в 08:17
поделиться

Невозможно с CSS сейчас боюсь.

Лучше всего просто использовать изображение (возможно, PNG) и разместить на нем хороший текст alt / title.

В качестве альтернативы вы можете использовать SPAN или DIV и иметь изображение в качестве фона для вашего текста, который вы хотите использовать для SEO-целей внутри него, но с текстовым отступом от экрана.

0
ответ дан Billy Moat 21 August 2018 в 14:20
поделиться
  • 1
    Да, ты прав. Я мог бы использовать изображения, не теряя очки SEO, но вы не можете выбрать текст, поиск на странице, увязка будет сложнее, и будет намного больше работы по обновлению текста ...: / – Love Dager 18 December 2012 в 14:46

Вы можете использовать myadzel Patternizer jQuery плагин для достижения этого эффекта в браузерах.

Вы используете Patternizer, добавляя class="background-clip" к HTML-элементам, где вы хотите, чтобы текст был нарисован как шаблон изображения, и укажите изображение в дополнительном атрибуте data-pattern="…". См. Источник демонстрации . Patternizer создаст изображение SVG с заполненным шаблоном текстом и подпишет его прозрачно отображаемому HTML-элементу.

Если, как и в примере с образцом вопроса, шаблон заполнения текста должен быть частью фонового изображения, расширяющегося за пределами «узорного» элемента, я вижу два варианта (непроверенный, мой любимый первый):

  • Используйте маскирование вместо фонового изображения в SVG. Как и в ответе web-tiki , к которому с помощью Patternizer будет добавлена ​​автоматическая генерация SVG и невидимый элемент HTML сверху, что позволяет выбирать и копировать текст.
  • Или использовать автоматическую выравнивание изображения шаблона. Может быть сделано с кодом JavaScript, аналогичным тому, который был в ответом Gijs .
1
ответ дан Community 21 August 2018 в 14:20
поделиться

Я думаю, вы могли бы достичь чего-то подобного , используя background-clip , но я еще не тестировал это.

См. этот пример: http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html (только для Webkit, я не знаю, еще не знаю, как изменить черный фон на белый)

2
ответ дан feeela 21 August 2018 в 14:20
поделиться
  • 1
    Да, это может сработать! Спасибо, теперь выровнять все правильно .. Черт .. -.- – Love Dager 18 December 2012 в 14:48

Это возможно , но пока только с браузерами на основе Webkit (Chrome, Safari, Rockmelt, что-либо, основанное на проекте Chromium.)

Фокус в том, чтобы иметь элемент в белом, который имеет тот же фон, что и тело, затем используйте -webkit- background-clip: text; во внутреннем элементе, который в основном означает «не расширяйте фон за пределами текста» и используйте прозрачный текст.

section
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    width: 100%;
    height: 300px;
}

div
{
    background: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 0);

    width: 60%;
    heighT: 80%;
    margin: 0 auto;
    font-size: 60px;
    text-align: center;
}

p
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    -webkit-background-clip: text;
}
​

http://jsfiddle.net/BWRsA/

3
ответ дан Kyle 21 August 2018 в 14:20
поделиться
  • 1
    Прохладный трюк! Но теперь выровнять все правильно будет сука .. -.- – Love Dager 18 December 2012 в 14:47
  • 2
    Да, это еще одна проблема. Он все еще находится в разработке, и я искренне надеюсь, что мы скоро увидим что-то подобное! :) – Kyle 18 December 2012 в 14:48
  • 3
    Кроме того, вы всегда можете накладывать поверх прозрачного текста на изображение, чтобы его можно было выбрать. Но я уверен, что это плохая практика для SEO. Скрытые сообщения / ключевые слова и т. Д. – Kyle 18 December 2012 в 14:56
  • 4
    выровняли простой способ jsfiddle.net/BWRsA/2 – Gijs 18 December 2012 в 15:11
  • 5
    Ах, давай, ребята ... Да, я планирую использовать его в производстве. Но, конечно, не без возврата! @cimmanon – Love Dager 19 December 2012 в 00:41

Один из способов, который работает в большинстве современных браузеров (кроме края), хотя и с черным фоном, заключается в использовании

background: black;
color: white;
mix-blend-mode: multiply;

в вашем текстовом элементе, а затем поместить любой фон, который вы хотите позади что. Умножение в основном отображает код цвета 0-255 в 0-1, а затем умножает его на то, что стоит за ним, поэтому черный остается черно-белым, умножается на 1 и эффективно становится прозрачным. http://codepen.io/nic_klaassen/full/adKqWX/

14
ответ дан Nic 21 August 2018 в 14:20
поделиться
  • 1
    Для белого фона с черным цветом используйте color-dodge, lighten или screen на mix-blend-mode – Imran Bughio 11 April 2016 в 07:36

Мне нужно было сделать текст, который выглядел так же, как в оригинальном посте, но я не мог просто подделать его, выстроив фон, потому что есть анимация за элементом. Никто, кажется, не предложил это еще, так вот что я сделал: (Пытался сделать так же легко, насколько это возможно.)

var el = document.body; //Parent Element. Text is centered inside.
var mainText = "THIS IS THE FIRST LINE"; //Header Text.
var subText = "THIS TEXT HAS A KNOCKOUT EFFECT"; //Knockout Text.
var fontF = "Roboto, Arial"; //Font to use.
var mSize = 42; //Text size.

//Centered text display:
var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox),
ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff";
ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400;

//Generate subtext SVG for knockout effect:
txtSub.innerHTML =
"<svg xmlns='http://www.w3.org/2000/svg' width='"+stLen+"px' height='"+(mSize+11)+"px' viewBox='0 0 "+stLen+" "+(mSize+11)+"'>"+
    "<rect x='0' y='0' width='100%' height='100%' fill='#fff' rx='4px' ry='4px' mask='url(#txtSubMask)'></rect>"+
    "<mask id='txtSubMask'>"+
        "<rect x='0' y='0' width='100%' height='100%' fill='#fff'></rect>"+
        "<text x='"+(stLen/2)+"' y='"+(mSize+6)+"' font='"+mSize+"pt "+fontF+"' text-anchor='middle' fill='#000'>"+subText+"</text>"+
    "</mask>"+
"</svg>";

//Relevant Helper Functions:
function centeredDiv(parent) {
    //Container:
    var d = document.createElement('div'), s = d.style;
    s.display = "table"; s.position = "relative"; s.zIndex = 999;
    s.top = s.left = 0; s.width = s.height = "100%";
    //Content Box:
    var k = document.createElement('div'), j = k.style;
    j.display = "table-cell"; j.verticalAlign = "middle";
    j.textAlign = "center"; d.appendChild(k);
    parent.appendChild(d); return k;
}
function mkDiv(parent, tCont) {
    var d = document.createElement('div');
    if(tCont) d.textContent = tCont;
    parent.appendChild(d); return d;
}
function textWidth(text, font, size) {
    var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")),
    context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font;
    return context.measureText(text).width;
}

Просто бросьте это в окно window.onload, установите фон тела к вашему изображению и наблюдать за магией!

1
ответ дан Pecacheu 21 August 2018 в 14:20
поделиться

просто поместите это css

    .banner-sale-1 .title-box .title-overlay {
      font-weight: 900;
      overflow: hidden;
      margin: 0;
      padding-right: 10%;
      padding-left: 10%;
      text-transform: uppercase;
      color: #080404;
      background-color: rgba(255, 255, 255, .85);

      /* that css is the main think (mix-blend-mode: lighten;)*/
      mix-blend-mode: lighten;

    }
0
ответ дан Rashed 21 August 2018 в 14:20
поделиться

Хотя это возможно с помощью CSS, лучшим подходом было бы использование встроенного SVG с маскировкой SVG . Этот подход имеет некоторые преимущества перед CSS:

CodePen Demo: Маска текста SVG

transparent text clipping background [/g9]

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}
<svg viewbox="0 0 100 60">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>    
</svg>

Если вы хотите сделать текст доступным и доступным для поиска, вам необходимо включить его за пределы <defs>. В следующем примере показано, как сохранить прозрачный текст с тегом <use> :

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}
<svg viewbox="0 0 100 60">
  <defs>
    <g id="text">
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </g>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <use xlink:href="#text" />
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>
  <use xlink:href="#text" mask="url(#mask)" />
</svg>

43
ответ дан web-tiki 21 August 2018 в 14:20
поделиться
  • 1
    Это, похоже, единственное решение, которое работает сегодня в браузере: IE11, FF, Chrome, Safari. И не нужно изображение в качестве фона, как многие другие решения, предоставляемые этой проблеме во всем мире. – Timo Kähkönen 27 April 2015 в 21:18
  • 2
    Вдохновленный этим ответом, я сделал анимацию ключевых кадров, где вращается прозрачный SVG-текст на белом закругленном прямоугольнике. Фон имеет текст и изображения. Иди и посмотри: jsbin.com/nipuqu/3 (Чемпионат мира идет :)) – Timo Kähkönen 27 April 2015 в 21:53
  • 3
    Хорошее решение, но поскольку «выберите текст и поиск на странице» похоже, в требованиях OP, вы можете захотеть включить <text> вне части <defs>. (Кстати, я не уверен, как сканеры SE занимаются SVG-контентом в defs). Вот способ сохранить то, что хочет OP, с ужасной эксплойтой FF: jsfiddle.net/tfneqxxb – Kaiido 22 January 2016 в 12:49
  • 4
    Что делать, если текст динамический? Он не автоматизирует регулировку ширины. – Imran Bughio 11 April 2016 в 07:29
  • 5
  • 6
    Это должен быть принятый ответ – BrassApparatus 9 March 2017 в 18:27
1
ответ дан Community 1 November 2018 в 08:17
поделиться