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


90

CSSを使用して、次の画像のような背景効果から透明なテキストを切り取る方法はありますか?
テキストに代わる画像のために、すべての貴重なSEOを失うのは悲しいことです。

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

最初は影のことを考えましたが、何もわかりません...

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


「テキストに代わる画像が原因で、すべての貴重なSEOが失われます。」既存の画像置換技術もあり、それでもまだ使いやすいです。ところで:実際には手紙の背景も透明である必要があります。これはここでの問題です…
フィーラ

CSSで可能であればyeap、これは...、偉大な練習になります
ジェシカLingmn

<h1><img alt="Some Text" /></h1>ほどSEOフレンドリーでない理由はわかりません<h1>Some Text</h1>。従来、画像の問題は、サポートされているマークアップがなく、ページにダンプされただけでした。
cimmanon

@cimmanonええ、あなたは正しいです。私はおそらくSEOポイントを失うことなく画像を使用することができますが、テキストを選択したり、ページで検索したりすることはできません。リンクはより複雑になり、テキストを更新するのに多くの作業が必要になります...:/
Love Dager

2
ちょうどあなたが知っているように、GoogleはCSS画像置換技術で完全にクールです: mezzoblue.com/archives/2008/05/05/image_replac
cimmanon

回答:


46

それはcss3で可能ですが、すべてのブラウザでサポートされているわけではありません

background-clip:text; テキストの背景を使用できますが、ページの背景に揃える必要があります

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/


あなたの人々は速
すぎる

それはいい!家に帰ったらすぐに自動調整をテストします!ありがとうございました!:D
Love Dager

mabyはコードを少し変更する必要があります。状況によって異なりますが、他の要素と競合する可能性があり、これは非常に高速に記述されています。質問がある場合は、聞いてみます
Gijs

3
答えを無視しないでください。これは本当に素晴らしい解決策ですbackground-clip:textが、Webkitのみの非標準オプションです。CSS3はtextこの属性の値を許可しません(を参照)。
tanius

1
このテクニックを使用すると、通常テキストが表示される要素の背景を確認できます。私はテキストが通常ある場所を介してテキストの下の要素の下にあるものを確認する方法を探しています。
Vince

49

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

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


2
これは、今日クロスブラウザーで動作する唯一のソリューションのようです:IE11、FF、Chrome、Safari。そして、ウェブ全体の問題に提供される他の多くの解決策のように、背景として画像を必要としません。
TimoKähkönen15年

1
この答えに触発されて、キーフレームアニメーションを作成しました。白い丸い長方形の透明なSVGテキストが回転します。背景にはテキストと画像があります。見に行ってください:jsbin.com/nipuqu/3(世界選手権がやってくる:))
TimoKähkönen15年

2
良い解決策ですが、「テキストを選択してページで検索」はOPの要件にあるように見えるため<text><defs>パーツの外側を含めることができます。(ところで、SEクローラーがdefs内のSVGコンテンツをどのように処理するかわかりません)。ここで恐ろしいFFのバグで、OPが望んでいるものを維持するための方法が悪用される:jsfiddle.net/tfneqxxb
Kaiido

テキストが動的な場合はどうなりますか?幅を自動調整しません。
Imran Bughio

1
@ImranBughioいいえ、ありません。SVGテキストはプレーンHTMLテキストのようには機能しません。あなたはそれを配置する必要があります。詳細については、こちらを
web-tiki

16

ほとんどの最新のブラウザー(つまり、エッジを除く)で機能する1つの方法は、背景が黒の場合のみですが、

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

テキスト要素に入れて、その後ろに好きな背景を入れます。Multiplyは基本的に0〜255のカラーコードを0〜1にマップし、その後ろに何でも乗算します。したがって、黒は黒のままで、白は1で乗算され、実質的に透明になります。 http://codepen.io/nic_klaassen/full/adKqWX/


3
黒い色の白い背景の場合color-dodgelightenまたはscreenオンmix-blend-mode
Imran Bughio

3

それ可能ですが、これまでのところ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/


クールなトリック!しかし、今、すべてを適切に揃えることは雌犬になるでしょう.. -.-
Love Dager

ええ、それは別の問題です。それはまだ開発中であり、私はこのようなものがすぐに見られることを心から願っています!:)
カイル

また、画像の透明なテキストの上にいつでも重ねることができるので、画像を選択できます。しかし、それはSEOにとって悪い習慣だと確信しています。隠されたメッセージ/キーワードなど。
カイル

Webkitブラウザーでは非常に見栄えが良いと思いますが、他の人にとっては、草の上にある半透明の白いボックスです。
cimmanon

1
ああ、みんな来て...はい、私はそれを生産で使用する予定です。しかし、もちろんフォールバックなしではありません!@cimmanon
Love Dager、

2

あなたはを使用しbackground-clipてそのような何かを達成できると思いますが、私はまだそれをテストしていません。

この例を参照してください:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(Webkitのは唯一、私は白1黒の背景を変更する方法をまだ知りません)


ええ、それはうまくいくかもしれません!ありがとう、すべてを正しく位置合わせしてください。くそー.. -.-
Love Dager

2

私はこれをいじりながら新しい方法を発見したばかりですが、それがどのように機能するかは完全にはわかりません(誰か他の人が説明したい場合はどうぞ)。

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

反転/ネガティブ/リバースフォントを使用して、font-face="…" CSSルールで。文字間の小さな白い隙間を避けるために、文字の間隔を調整する必要があるかもしれません。

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

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


1

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

class="background-clip"テキストを画像パターンとしてペイントするHTML要素に追加してPatternizerを使用し、追加のdata-pattern="…"属性で画像を指定します。デモのソースをご覧ください。パターン化機能は、パターンが満たされたテキストを含むSVG画像を作成し、それを透過的にレンダリングされたHTML要素にアンダーレイします。

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

  • SVGで背景画像の代わりにマスキングを使用します。web-tikiの回答と同様に、Patternizerを使用しても、SVGの自動生成と、テキストの選択とコピーを可能にする非表示のHTML要素が上に追加されます。
  • または、パターン画像の自動配置を使用します。Gijsの回答にあるものと同様のJavaScriptコードで実行できます。

1

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

    }

1

デモのスクリーンショット

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

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


0

残念ながら今のところCSSでは不可能です。

あなたの最善の策は、単純に画像(おそらくPNG)を使用し、その上に適切なalt / titleテキストを配置することです。

あるいは、SPANまたはDIVを使用して、SEOの目的でテキストを挿入し、画面の外にテキストインデントを付けることで、その背景として画像を使用することもできます。


ええ、あなたは正しいです。私はおそらくSEOポイントを失うことなく画像を使用できますが、テキストを選択したり、ページで検索したりすることはできません。リンクはより複雑になり、テキストを更新するのに多くの作業が必要になります...:/
Love Dager

0

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>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.