Прозрачный текст, вырезанный из фона

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

• много улучшена поддержка браузера: IE10+, chrome, Firefox, safari...
• это не влияет на SEO, поскольку пауки могут сканировать содержимое SVG (google индексирует контент SVG с 2010 года)

Сайт CodePen Демо : SVG текст маска

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>

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

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

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

Это - это возможно, но пока только с браузерами на основе 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/

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

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

вы можете использовать инвертированный / отрицательный / обратный шрифт и применить его с font-face="…" правило CSS. Возможно, вам придется играть с интервалом между буквами, чтобы избежать небольших белых промежутков между буквами.

Если вам не требуется определенный шрифт, это просто. Загрузите симпатичный, например, из этого коллекция перевернутый шрифтов.

Если вам требуется определенный шрифт (скажем, "Open Sans"), это сложно. Вы должны преобразовать существующий шрифт в перевернутая версия. Это возможно вручную с помощью font Creator, FontForge и т. д. но , конечно, мы хотим автоматизированное решение. Я не мог найти инструкции, но некоторые советы:

• как преобразовать растровый шрифт в шрифт TrueType (плюс еще один способ для этого). Сначала можно было бы использовать команды ImageMagick для визуализации глифов шрифтов в растровые изображения с высоким разрешением и инвертировать их, а затем преобразовать их обратно в шрифт TrueType с вышеуказанными инструкциями.
• можно ли инвертировать шрифт с помощью FontForge или другого PGM?
• создание обратного (белого на черном) шрифта

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

вы используете шаблон, добавив class="background-clip" к элементам HTML, где вы хотите, чтобы текст был нарисован как шаблон изображения, и укажите изображение в дополнительном

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

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;
}

просто выбросить в окно.onload, установите фон тела на свое изображение и наблюдайте, как происходит волшебство!

не возможно с CSS только сейчас я боюсь.

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

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

просто поставьте этот 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;

    }

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

это, кажется, работает очень хорошо, и не требует двойного фона или 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>