Arka plandan kesilmiş şeffaf metin

CSS ile, aşağıdaki resimdeki gibi bir arka plan efektinden şeffaf bir metin kesmenin bir yolu var mı ?
Metnin yerini alan görseller yüzünden tüm değerli SEO'yu kaybetmek üzücü olurdu.

Önce gölgeleri düşündüm ama hiçbir şey çözemiyorum ...

Görüntü, site arka planıdır, mutlak konumlandırılmış bir <img>etikettir

Css3 ile mümkündür ancak tüm tarayıcılarda desteklenmez

Arka plan klibi ile: metin; metin için bir arka plan kullanabilirsiniz, ancak bunu sayfanın arka planı ile hizalamanız gerekecektir.

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/

Otomatik Hizalama

Küçük bir javascript ile arka planı otomatik olarak hizalayabilirsiniz:

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

Bu CSS ile mümkün olsa da , SVG maskelemeli bir satır içi SVG kullanmak daha iyi bir yaklaşım olacaktır . Bu yaklaşımın CSS'ye göre bazı avantajları vardır:

• Çok daha iyi tarayıcı desteği : IE10 +, chrome, Firefox, safari ...
• Örümcekler SVG içeriğini tarayabildiğinden bu SEO'yu etkilemez ( google 2010'dan beri SVG içeriğini dizine ekler )

CodePen Demo: SVG metin maskesi

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>

Metni seçilebilir ve aranabilir hale getirmeyi hedefliyorsanız, onu <defs>etiketin dışına eklemeniz gerekir . Aşağıdaki örnek, şeffaf metni <use>etiketiyle birlikte tutmanın bir yolunu gösterir :

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>

Çoğu modern tarayıcıda (yani, edge hariç), yalnızca siyah bir arka plana sahip olmasına rağmen, çalışan bir yol,

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

metin öğenize yerleştirin ve ardından arkasına istediğiniz arka planı koyun. Temel olarak 0-255 renk kodunu 0-1 ile çarpın ve ardından bunu arkasında olanla çarpın, böylece siyah siyah olarak kalır ve beyaz 1 ile çarpılır ve etkili bir şekilde şeffaf hale gelir. http://codepen.io/nic_klaassen/full/adKqWX/

Bu ise mümkün, ama şimdiye kadar sadece Webkit tabanlı tarayıcılarla (Chromium projesine dayalı Chrome, Safari Rockmelt, bir şey.)

İşin püf noktası, beyaz olanın içinde gövdeyle aynı arka plana sahip bir öğeye sahip olmak, ardından -webkit- background-clip: text;temelde "arka planı metnin ötesine genişletme" anlamına gelen iç öğede kullanmak ve şeffaf metin kullanmaktır.

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/

Sanırım kullanarakbackground-clip böyle bir şey başarabilirsin , ama bunu henüz test etmedim.

Şu örneğe bakın:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(Yalnızca Webkit, henüz siyah arka planı beyaz olanla nasıl değiştireceğimi bilmiyorum)

Etrafta dolaşırken bunu yapmanın yeni bir yolunu keşfettim, nasıl çalıştığından tam olarak emin değilim (eğer başka biri açıklamak isterse lütfen yapın).

Çok iyi çalışıyor gibi görünüyor ve çift arka plan veya JavaScript gerektirmiyor.

İşte kod: 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>

Ters / negatif / ters yazı tipi kullanabilir ve font-face="…"CSS kuralıyla uygulayabilirsiniz . Harfler arasında küçük beyaz boşluklardan kaçınmak için harf aralıklarıyla oynamak zorunda kalabilirsiniz.

Belirli bir yazı tipine ihtiyacınız yoksa, basittir. Örneğin bu ters çevrilmiş yazı tipi koleksiyonundan hoş bir tane indirin .

Belirli bir yazı tipine ihtiyacınız varsa (örneğin, "Açık Sans"), bu zordur. Mevcut yazı tipinizi ters çevrilmiş bir sürüme dönüştürmelisiniz. Bu, Font Creator, FontForge vb. İle manuel olarak mümkündür, ancak elbette otomatik bir çözüm istiyoruz. Henüz bunun için talimat bulamadım, ancak bazı ipuçları:

• Bir bitmap yazı tipini TrueType yazı tipine dönüştürme (artı bunu yapmanın başka bir yolu ). Önce ImageMagick komutlarını font gliflerini yüksek çözünürlüklü raster görüntülere dönüştürmek ve ters çevirmek için kullanır, ardından yukarıdaki talimatlarla bunları TrueType yazı tipine geri dönüştürür.
• FontForge veya başka bir PGM ile bir fontu ters çevirmek mümkün müdür?
• Ters (siyah üzerine beyaz) yazı tipi oluşturma

Sen myadzel en kullanabilirsiniz Patternizer jQuery eklentisi tarayıcılar arasında bu etkiyi elde etmek için. Şu anda, bunu yalnızca CSS ile yapmanın çapraz tarayıcı yolu yoktur.

class="background-clip"Metnin boyanmasını istediğiniz yerde HTML öğelerine ekleyerek Patternizer'ı kullanırsınız ve ek bir data-pattern="…"öznitelikte görüntüyü belirtirsiniz . Kaynağını bakın demo . Patternizer, desenle doldurulmuş metin içeren bir SVG görüntüsü oluşturacak ve bunu saydam bir şekilde oluşturulmuş HTML öğesine yerleştirecektir.

Sorunun örnek resminde olduğu gibi, metin doldurma deseninin "desenli" öğenin ötesine uzanan bir arka plan resminin parçası olması gerekiyorsa, iki seçenek görüyorum (denenmemiş, önce favorim):

• SVG'de arka plan görüntüsü yerine maskeleme kullanın. Olduğu gibi , web-Tiki cevabı , yine SVG otomatik nesil ve metin seçimi ve kopyalama izin verir üstünde görünmez bir HTML öğesi katacak Patternizer kullanarak hangi.
• Veya desen görüntüsünün otomatik hizalamasını kullanın. Gijs'in cevabındaki gibi JavaScript kodu ile yapılabilir .

sadece css'i koy

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

    }

Orijinal gönderideki gibi görünen bir metin yapmam gerekiyordu, ancak arka planı sıralayarak bunu taklit edemezdim çünkü öğenin arkasında biraz animasyon var. Henüz kimse bunu önermemiş gibi görünüyor, işte ben şunu yaptım: (Okumayı olabildiğince kolaylaştırmaya çalıştım.)

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

Sadece bunu pencerenize atın.

Korkarım şu anda CSS ile mümkün değil.

Yapabileceğiniz en iyi şey, sadece bir resim (muhtemelen bir PNG) kullanmak ve üzerine iyi bir alt / başlık metni yerleştirmektir.

Alternatif olarak, bir SPAN veya DIV kullanabilir ve görüntüyü, içinde SEO amaçları için istediğiniz metninizle arka plan olarak alabilir, ancak ekran dışında metin girintisi yapabilirsiniz.

mix-blend-mode aynı zamanda bu tür bir etki için bir olasılıktır.

mix-blend-modeCSS özellik setleri bir elemanın içeriği öğenin üst öğesinin içeriği ve elementin arka plan ile uyum nasıl.

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>