Teks transparan dipotong dari latar belakang

Apakah ada cara untuk membuat teks transparan dipotong dari efek latar belakang seperti yang ada di gambar berikut, dengan CSS?
Akan sangat menyedihkan jika kehilangan semua SEO yang berharga karena gambar yang menggantikan teks.

Saya pertama kali memikirkan bayangan tetapi saya tidak tahu apa-apa ...

Gambar adalah latar belakang situs, <img>tag yang diposisikan secara absolut

Ini dimungkinkan dengan css3 tetapi tidak didukung di semua browser

Dengan klip latar belakang: teks; Anda dapat menggunakan latar belakang untuk teks, tetapi Anda harus menyelaraskannya dengan latar belakang halaman

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/

Perataan Otomatis

Dengan sedikit javascript Anda dapat menyelaraskan latar belakang secara otomatis:

$(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/

Meskipun hal ini dimungkinkan dengan CSS, pendekatan yang lebih baik adalah menggunakan SVG sebaris dengan masking SVG . Pendekatan ini memiliki beberapa keunggulan dibandingkan CSS:

• Banyak dukungan browser yang lebih baik : IE10 +, chrome, Firefox, Safari ...
• Ini tidak memengaruhi SEO karena spider dapat merayapi konten SVG ( google mengindeks konten SVG sejak 2010 )

Demo CodePen: topeng teks 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>

Jika Anda ingin membuat teks dapat dipilih dan dicari, Anda harus memasukkannya di luar <defs>tag. Contoh berikut menunjukkan cara untuk melakukannya dengan menjaga teks transparan dengan <use>tag:

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>

Salah satu cara yang berfungsi pada kebanyakan browser modern (kecuali yaitu edge), meskipun hanya dengan latar belakang hitam, adalah dengan menggunakan

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

di elemen teks Anda dan kemudian letakkan latar belakang apa pun yang Anda inginkan di belakangnya. Multiply pada dasarnya memetakan kode warna 0-255 menjadi 0-1 dan kemudian mengalikannya dengan apa pun yang ada di belakangnya, sehingga hitam tetap hitam dan putih dikalikan dengan 1 dan secara efektif menjadi transparan. http://codepen.io/nic_klaassen/full/adKqWX/

Hal ini mungkin, namun sejauh ini hanya dengan browser berbasis WebKit (Chrome, Safari, Rockmelt, apa pun berdasarkan pada proyek Chromium.)

Triknya adalah dengan memiliki elemen dalam putih yang memiliki latar belakang yang sama dengan badan, kemudian gunakan -webkit- background-clip: text;pada elemen dalam yang pada dasarnya berarti "jangan memperluas latar belakang di luar teks" dan gunakan teks transparan.

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/

Saya kira Anda bisa mencapai sesuatu seperti itu dengan menggunakanbackground-clip , tapi saya belum mengujinya.

Lihat contoh ini:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(Hanya Webkit, saya belum tahu cara mengubah latar belakang hitam menjadi putih)

Saya baru saja menemukan cara baru untuk melakukan ini sambil mengotak-atik, saya tidak sepenuhnya yakin cara kerjanya (jika ada orang lain yang ingin menjelaskan, tolong lakukan).

Tampaknya berfungsi dengan sangat baik, dan tidak memerlukan latar belakang ganda atau JavaScript.

Inilah kodenya: 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>

Anda dapat menggunakan font terbalik / negatif / terbalik dan menerapkannya dengan font-face="…"aturan CSS. Anda mungkin harus bermain-main dengan spasi huruf untuk menghindari celah putih kecil di antara huruf.

Jika Anda tidak membutuhkan font tertentu, itu sederhana. Unduh yang disukai, misalnya dari koleksi font terbalik ini .

Jika Anda membutuhkan font tertentu (katakanlah, "Open Sans"), itu sulit. Anda harus mengubah font yang ada menjadi versi terbalik. Ini dimungkinkan secara manual dengan Font Creator, FontForge dll., Tetapi tentu saja kami menginginkan solusi otomatis. Saya belum dapat menemukan instruksi untuk itu, tetapi beberapa petunjuk:

• Bagaimana mengubah font bitmap menjadi font TrueType (ditambah cara lain untuk melakukannya). Seseorang pertama-tama akan menggunakan perintah ImageMagick untuk merender font glyph menjadi gambar raster resolusi tinggi dan untuk membalikkannya, lalu mengubahnya kembali ke font TrueType dengan instruksi di atas.
• Apakah mungkin untuk membalikkan font dengan FontForge atau PGM lain?
• Membuat font terbalik (putih di atas hitam)

Anda dapat menggunakan plugin jQuery Patternizer myadzel untuk mencapai efek ini di seluruh browser. Saat ini, tidak ada cara lintas browser untuk melakukan ini hanya dengan CSS.

Anda menggunakan Patternizer dengan menambahkan class="background-clip"ke elemen HTML di mana Anda ingin teks dilukis sebagai pola gambar, dan menentukan gambar dalam data-pattern="…"atribut tambahan . Lihat sumber demo . Patternizer akan membuat gambar SVG dengan teks berisi pola dan melapisinya ke elemen HTML yang dirender secara transparan.

Jika, seperti pada gambar contoh pertanyaan, pola isian teks harus menjadi bagian dari gambar latar belakang yang melampaui elemen "berpola", saya melihat dua opsi (belum diuji, favorit saya dulu):

• Gunakan masking alih-alih gambar latar belakang di SVG. Seperti dalam jawaban web-tiki , yang menggunakan Patternizer akan tetap menambahkan generasi otomatis SVG dan elemen HTML yang tidak terlihat di atasnya yang memungkinkan pemilihan dan penyalinan teks.
• Atau gunakan penyelarasan otomatis dari gambar pola. Dapat dilakukan dengan kode JavaScript yang mirip dengan yang ada di jawaban Gijs .

taruh saja css itu

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

    }

Saya perlu membuat teks yang terlihat persis seperti di postingan aslinya, tetapi saya tidak bisa hanya memalsukannya dengan menyejajarkan latar belakang, karena ada beberapa animasi di belakang elemen. Sepertinya belum ada yang menyarankan ini, jadi inilah yang saya lakukan: (Mencoba membuatnya semudah mungkin untuk dibaca.)

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

Buang saja itu di window.onload Anda, atur latar belakang tubuh ke gambar Anda, dan saksikan keajaiban terjadi!

Tidak mungkin dengan CSS sekarang, saya khawatir.

Taruhan terbaik Anda adalah dengan hanya menggunakan gambar (mungkin PNG) dan menempatkan teks alt / judul yang bagus di atasnya.

Atau Anda dapat menggunakan SPAN atau DIV dan memiliki gambar sebagai latar belakang dengan teks Anda yang Anda inginkan untuk tujuan SEO di dalamnya tetapi teks-indentasi dari layar.

mix-blend-mode juga kemungkinan untuk efek semacam itu.

The mix-blend-modeCSS set properti bagaimana konten elemen harus berbaur dengan isi induk elemen dan latar belakang elemen.

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>