Прозорий текст вирізати з фону

Чи є спосіб зробити прозорий текст, вирізаний із фонового ефекту, такого як на наступному зображенні, за допомогою CSS?
Було б сумно втратити всі цінні SEO, оскільки зображення замінюють текст.

Спочатку я подумав про тіні, але нічого не можу зрозуміти ...

Зображення є фоном сайту, абсолютно позиціонованим <img>тегом

Це можливо з 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>

http://jsfiddle.net/JGPuZ/1337/

Автоматичне вирівнювання

За допомогою невеликого javascript можна автоматично вирівняти фон:

$(document).ready(function(){
  //Position of the header in the webpage
  var position = $("h1").position();
  var padding = 10; //Padding set to the header
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1336/

Хоча це можливо з CSS, кращим підходом було б використання вбудованого 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>

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

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 , але я ще не тестував цього.

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

Я щойно знайшов новий спосіб зробити це, возившись, я не зовсім впевнений, як це працює (якщо хтось інший хоче пояснити, будь ласка).

Здається, це працює дуже добре і не вимагає подвійних фонів або 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>

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

Якщо вам не потрібен певний шрифт, це просто. Завантажте симпатичний, наприклад з цієї колекції перевернутих шрифтів .

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

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

Ви можете використовувати плагін myadzel Patternizer jQuery щоб досягти цього ефекту в усіх браузерах. На даний момент не існує жодного способу переходу між браузерами за допомогою CSS.

Ви використовуєте Patternizer, додаючи class="background-clip"до елементів HTML, де потрібно, щоб текст був намальований як шаблон зображення, і вказуєте зображення в додатковому data-pattern="…"атрибуті. Дивіться джерело демо . Patternizer створить зображення SVG із заповненим зразком текстом і підкладе його до прозоро відтвореного елемента HTML.

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

• Використовуйте маскування замість фонового зображення у SVG. Як і у відповіді web-tiki , до якого використання Patternizer все одно додасть автоматичну генерацію SVG та невидимий HTML-елемент зверху, що дозволяє виділяти та копіювати текст.
• Або скористайтеся автоматичним вирівнюванням зображення візерунка. Це можна зробити за допомогою коду JavaScript, подібного до коду у відповіді Гія .

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

    }

Мені потрібно було зробити текст, який виглядав точно так, як це робиться в оригінальній публікації, але я не міг просто підробити його, вишикувавши фони, тому що за елементом є деяка анімація. Здається, цього ще ніхто не пропонував, тож ось що я зробив: (Намагався зробити його якомога легшим для читання).

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, встановіть фон тіла на своє зображення і спостерігайте, як відбувається магія!

Зараз це неможливо з CSS, боюся.

Найкраще використовувати просто зображення (можливо, PNG) і розмістити на ньому гарний текст заміни / заголовка.

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

mix-blend-mode також є можливість для такого виду ефекту.

В mix-blend-modeCSS набори властивостей , як вміст елемента повинні поєднуватися з вмістом батьківського елемента і фоном елемента.

h1 {
background:white;
mix-blend-mode:screen;

/* demo purpose from here */
padding:0.25em;
mix-blend-mode:screen;
}


html {
background:url(https://i.picsum.photos/id/1069/367/267.jpg?hmac=w5sk7UQ6HGlaOVQ494mSfIe902cxlel1BfGUBpEYoRw)center / cover ;
min-height:100vh;
display:flex;
}
body {margin:auto;}
h1:hover {border:dashed 10px white;background-clip:content-box;box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #fff}

<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>