html - CSSで逆テキストマスクを適用する方法

Question

私の質問を画像で説明しようと思います。どうぞ。

1-この画像は、画像をマスクするテキストを示しています。これまでのところ、次のコードで実行できます。

font-size: 120px;
background: url(image-to-be-masked.jpg) repeat 0 0, white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

2-この他の画像、テキストは反対の効果を作成し、テキスト領域のみを透明にします。これが私が欲しいものです：

誰かがそれを試しましたか？

Answer 1

CSSではそれができないと思います。ただし、3つの異なるネストされた要素を使用して一緒にハックすることができます。

• 最も外側の要素には背景画像が含まれています
• 真ん中の要素には真ん中の画像が含まれています
• background-clip:text;内側の要素にはテキストが含まれ、最初の例のようにマスクされた、最も外側の要素と同じ背景画像があります。

これは機能しますが、目的の効果を実現するにはマスクの背景位置を補正する必要があるため、少し面倒です。次に例を示します：http：//jsfiddle.net/dzkTE/。

Answer 2

私はいくつかの異なる方法でこれを達成することができました。ここで私の答えを参照してください：https ：//stackoverflow.com/a/32476482/2315496

下記参照：

HTML / CSS / JavaScriptで探しているものには3つの方法があり、いくつかは他の方法よりも少しハックです。

1. <canvas>形状とタイプを描画するために使用し、キャンバスコンテキストctx.globalCompositeOperation="xor";がどこにあるかを設定します。ctx

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.font = "bold 36px Proxima Nova";
ctx.fillStyle='blue';
ctx.fillText("MORE",100,87);
ctx.globalCompositeOperation='xor';
ctx.beginPath();
ctx.fillStyle='white';
ctx.arc(150,75,75,0,2*Math.PI);
ctx.fill();

body{
  background: -webkit-radial-gradient(top left,rgb(23, 39, 34) 4%,rgb(56, 99, 99) 37%,rgb(22, 27, 15) 73%,rgb(22, 27, 14) 93%,#232323 100%);
  width:100%;
  height:100%;
}

html{
  height:100%
}

<canvas id='myCanvas'></canvas>

2. テキストの色を使用mix-blend-mode: screenして黒に設定します。

.blend-mode {
  background:white;
  border-radius:100%;
  width:150px;
  height:150px;
  line-height:155px;
  float:left;
  margin:20px;
  font-family: "Proxima Nova", Hevetica, sans-serif;
  font-weight:bold;
  color:black;
  text-align:center;
  vertical-align:middle;
  font-size:36px;
  mix-blend-mode: screen;
}

body{
  background: -webkit-radial-gradient(top left,rgb(23, 39, 34) 4%,rgb(56, 99, 99) 37%,rgb(22, 27, 15) 73%,rgb(22, 27, 14) 93%,#232323 100%);
  width:100%;
  height:100%;
}

html{
  height:100%;
}

<div class="blend-mode">MORE</div>

3. を使用-webkit-text-fill-color:transparentし-webkit-background-clip:textて、その背後にある背景のコピーを表示します。これは、「元の」背景と一致するように背景コピーの調整を必要とします。

.wrap{
  margin:20px;
  float:left;
  position:relative;
}

.background {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background: white;
  position:absolute;
  top:0;
  left:0;
  z-index:4;
  
}

.text {
  position:absolute;
  top: 25px;
  left: 25px;
  z-index:5;
  background: -webkit-radial-gradient(top left, rgb(23, 39, 34) 4%, rgb(56, 99, 99) 37%, rgb(22, 27, 15) 73%, rgb(22, 27, 14) 93%, #232323 100%);
  font-family: Proxima Nova, Helvetica, sans-serif;
  font-weight:bold;
  line-height:100px;
  font-size: 36px;
  color: #666;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body{
  background: -webkit-radial-gradient(top left,rgb(23, 39, 34) 4%,rgb(56, 99, 99) 37%,rgb(22, 27, 15) 73%,rgb(22, 27, 14) 93%,#232323 100%);
  width:100%;
  height:100%;
}

html{
  height:100%;
}

<div class="wrap">
  <div class="background"></div>
  <div class="text">MORE</div>
</div>

これらのどれもクロスブラウザでうまく機能する可能性は低く、私はそれらをテストしていません！

Answer 3

* { margin: 0; padding: 0 }

header {
    overflow: hidden;
    height: 100vh;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_butterfly_bg.jpg) 50%/ cover
}

h2 {
    color: white;
    mix-blend-mode: difference;
    font: 900 35vmin/35vh cookie, cursive;
    text-align: center
}

<header>
    <h2 contentEditable role='textbox' aria-multiline='true'>And stay alive...</h2>
</header>

Answer 4

[申し訳ありませんが、これを読み間違えました。反対に試してみました：P]background-clipを使えばできると思います。

background-clip:text;

こちらを確認してください（Chromeで試すか、ベンダープレフィックスを追加してください）。あなたはクリスからデモページをチェックすることができます。