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

Есть ли способ сделать прозрачный текст , вырезанный из фонового эффекта, как тот, который изображен на следующем изображении, с помощью CSS?
Было бы грустно потерять все драгоценные SEO из-за изображений, заменяющих текст.

Сначала я думал о тенях, но я ничего не могу понять...

Изображение - это фон сайта, абсолютный позиционированный тег <img>

Ответ 1

Это возможно с помощью css3, но не поддерживается во всех браузерах

С фоном-клипом: текст; вы можете использовать фон для текста, но вам придется выровнять его с фоном страницы

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

<h1><span>ABCDEFGHIKJ</span></h1>

Ответ 2

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

Большая улучшенная поддержка браузера: IE10 +, хром, Firefox, сафари...
Это не влияет на 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>

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

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

Используйте маскирование вместо фонового изображения в SVG. Как в ответе веб-тики, к которому с помощью Patternizer будет добавляться автоматическое генерация SVG и невидимый элемент HTML сверху, что позволяет выбирать и копировать текст.
Или используйте автоматическое выравнивание изображения шаблона. Может быть сделано с кодом JavaScript, аналогичным тому, который указан в ответе Gijs.

Ответ 7

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

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

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

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

Ответ 8

Демо-скриншот

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

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, установите фон тела на свое изображение и посмотрите, как происходит волшебство!

Ответ 9

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

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

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

Ответ 10

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

    }