99

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

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

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

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

4

14 に答える 14

52

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>
</ p>

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

于 2012-12-18T12:49:35.020 に答える
51

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

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>

于 2015-04-20T12:18:52.793 に答える
25

最新のブラウザで機能する1つの方法は、

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

黒の背景に透明なテキストの場合、または

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

白地に透明なテキストを表示します。

ここに画像の説明を入力してください

htmlこれをクロムで機能させるには、要素に背景色を設定する必要もあります。

これらのスタイルをテキスト要素に配置してから、その背後に必要な背景を配置します。Multiplyは、基本的に0-255カラーコードを0-1にマップし、その背後にあるものを乗算するため、黒は黒のままで、白は1を乗算し、効果的に透明になります。この場合、画面は事実上反対です。 http://codepen.io/nic_klaassen/full/adKqWX/

于 2016-01-30T22:27:15.463 に答える
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/

于 2012-12-18T12:37:43.040 に答える
3

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

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

于 2018-01-10T06:30:44.557 に答える
3

近い将来、element()これを達成するために使用できます

element（）関数を使用すると、作成者はドキュメント内の要素を画像として使用できます。参照される要素の外観が変わると、画像も変わります。

秘訣は、テキストを使用して共通のdivを作成し、 。element()と組み合わせて使用​​することmaskです。

これは、現時点では最新バージョンのFirefoxでのみ機能する基本的な例です。

#text {
  font-size:35px;
  font-weight:bold;
  color:#000;
  font-family:sans-serif;
  text-transform: uppercase;
  white-space:nowrap;
  /* we hide it */ 
  position:fixed;
  right:200vw;
  bottom:200vh
}


body {
  background:url(https://picsum.photos/id/1018/800/800) center/cover; 
}

.main {
  margin:50px;
  height:100px;
  background:red;
  -webkit-mask:
    -moz-element(#text) center/contain no-repeat, /* this behave like a background-image*/
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
<div id="text">
You can put your text here
</div>

<div class="main">

</div>

次のように生成されます。

背景画像上のCSS透明テキスト

基本的な背景プロパティに依存しており、基本的なCSSを使用してテキストを簡単に更新できるため、応答性が高くなります。

あらゆる種類のコンテンツを検討し、パターンを作成することもできます。

#text {
  font-size:30px;
  font-weight:bold;
  color:#000;
  font-family:sans-serif;
  text-transform: uppercase;
  white-space:nowrap;
  padding:20px;
  /* we hide it */ 
  position:fixed;
  right:200vw;
  bottom:200vh
}
#text span {
  font-family:cursive;
  font-size:35px;
}


body {
  background:url(https://picsum.photos/id/1018/800/800) center/cover; 
}

.main {
  margin:50px;
  height:100px;
  background:red;
  -webkit-mask:
    -moz-element(#text) 0 0/20% auto, /* this behave like a background-image*/
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
<div id="text">
Your <span>text</span> here 
</div>

<div class="main">

</div>

背景上のCSSテキストマスク

そして、無限のスクロールテキストを作成するためのアニメーションを試してみませんか。

#text {
  font-size:30px;
  font-weight:bold;
  color:#000;
  font-family:sans-serif;
  text-transform: uppercase;
  white-space:nowrap;
  padding:20px 5px;
  /* we hide it */ 
  position:fixed;
  right:200vw;
  bottom:200vh
}


body {
  background:url(https://picsum.photos/id/1018/800/800) center/cover; 
}

.main {
  margin:50px;
  height:100px;
  padding-right:calc(50% - 50px);
  background:red;
  -webkit-mask:
    -moz-element(#text) 0 50%/200% auto content-box, /* this behave like a background-image*/
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:m 5s linear infinite;
}

@keyframes m{
  to {-webkit-mask-position:200% 50%}
}
<div id="text">
Srolling repeating text here 
</div>

<div class="main">

</div>

CSSマスクを使用したアニメーションテキスト

于 2020-11-29T12:30:47.200 に答える
2

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

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

于 2012-12-18T12:37:08.067 に答える
2

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

    }
于 2017-09-22T06:29:32.527 に答える
1

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

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

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

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

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

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

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

于 2015-10-17T15:23:47.933 に答える
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にスローし、ボディの背景を画像に設定して、魔法が起こるのを見てください！

于 2016-11-23T08:34:21.633 に答える
1

mix-blend-modeそのような効果の可能性もあります。

CSSプロパティはmix-blend-mode、要素のコンテンツを要素の親のコンテンツおよび要素の背景とどのようにブレンドするかを設定します。

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>

于 2020-08-25T15:47:03.283 に答える
1

mix-blend-mode: color-dodgeこれは、反対の色のコンテナで私のために働きました。

.main{
 background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
 height: 80vh;
 width: 100vw;
 padding: 40px;
}

.container{
   background-color: white;
   width: 80%;
   height: 50px;
   padding: 40px;
   font-size: 3em;
   font-weight: 600;
   mix-blend-mode: color-dodge;
}

.container span{
  color: black;
}
<div class="main">
<div class="container">
<span>This is my text</span>
</div>
</div>

于 2021-05-11T11:24:31.270 に答える
-1

今のところCSSでは不可能です。

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

または、SPANまたはDIVを使用して、画像を背景としてSEO目的のテキストをその中に入れ、画面からテキストをインデントすることもできます。

于 2012-12-18T12:27:11.510 に答える