web-dev-qa-db-ja.com

背景から切り取られた透明なテキスト

CSSで背景から切り取られた透明なテキストのような効果を作成する方法はありますか？
画像がテキストに置き換わっているため、貴重なSEOをすべて失うのは悲しいことです。

Transparent text cut out of background

私は最初に影について考えましたが、私は何も理解できません...

画像はサイトの背景、絶対配置された<img>タグです

csscss3svgfontscss-shapes
82
Love Dager

これはCSSで可能ですが、より良いアプローチは インラインSVG と SVGマスキング を使用することです。このアプローチには、CSSに比べていくつかの利点があります。

CodePenデモ： SVGテキストマスク

transparent text clipping background

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>
46
web-tiki

ほとんどの最新のブラウザ（つまり、Edgeを除く）で機能する1つの方法は、背景が黒の場合のみですが、

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

テキスト要素に追加し、その背後に必要な背景を配置します。 Multiplyは、基本的に0-255カラーコードを0-1にマッピングし、その後ろにあるものを乗算するため、黒は黒のままで、白は1を乗算し、事実上透明になります。 http://codepen.io/nic_klaassen/full/adKqWX/

16
Nic

Itisは可能ですが、これまでは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/

3
Kyle

sing background-clip のようなものを達成できると思いますが、まだテストしていません。

この例を参照してください。
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
（Webkitのみ、黒の背景を白の背景に変更する方法はまだわかりません）

2
feeela

私はちょうどいじりながらこれを行う新しい方法を発見しましたが、それがどのように機能するのか完全にはわかりません（誰か他の人が説明したい場合はしてください）。

非常にうまく機能しているようで、二重の背景や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>
1
ChrisBrownie55

Demo Screenshot

元の投稿とまったく同じように見えるテキストを作成する必要がありましたが、要素の背後にアニメーションがあるため、背景を並べて偽造することはできませんでした。まだ誰もこれを提案していないようですので、私がやったことは次のとおりです：（できるだけ読みやすくすることを試みました。）

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に投げて、ボディの背景を画像に設定して、魔法が起こるのを見てください！

1
Pecacheu

反転/負/反転フォントを使用し、font-face="…" CSSルールで適用できます。文字間の小さな白い隙間を避けるために、文字間隔で遊ぶ必要があるかもしれません。

特定のフォントを必要としない場合、それは簡単です。たとえば、この 反転フォントのコレクション から、好感の持てるものをダウンロードしてください。

特定のフォント（「Open Sans」など）が必要な場合、それは困難です。既存のフォントを反転バージョンに変換する必要があります。これは、Font Creator、FontForgeなどを使用して手動で実行できますが、もちろん自動化されたソリューションが必要です。私はまだそのための指示を見つけることができませんでしたが、いくつかのヒント：

1
tanius

myadzelの Patternizer jQueryプラグインを使用して、ブラウザー全体でこの効果を実現できます。現時点では、CSSだけでこれを行うクロスブラウザの方法はありません。

Patternizerを使用するには、テキストを画像パターンとしてペイントするHTML要素にclass="background-clip"を追加し、追加のdata-pattern="…"属性で画像を指定します。 demo のソースを参照してください。 Patternizerは、パターンが埋め込まれたテキストを使用してSVG画像を作成し、透過的にレンダリングされたHTML要素にアンダーレイします。

質問のサンプル画像のように、テキストの塗りつぶしパターンが「パターン化された」要素を超えて広がる背景画像の一部である場合、2つのオプションが表示されます（未テスト、最初にお気に入り）。

  • SVGで背景画像の代わりにマスキングを使用します。web-tiki's answer のように、Patternizerを使用しても追加されますSVGの自動生成と、テキストの選択とコピーを可能にする非表示のHTML要素。
  • またはパターン画像の自動整列を使用します。Gijs's answer のようなJavaScriptコードで実行できます。
1
tanius

その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;

    }
0
Rashed

今はCSSでは不可能です。

最善の策は、単純に画像（おそらくPNG）を使用し、その上に適切な代替/タイトルテキストを配置することです。

別の方法として、SPANまたはDIVを使用して、SEOの目的でテキストを画面の外にインデントするテキストを含む背景として画像を使用することもできます。

0
Billy Moat