Question

我会尝试用图像解释我的问题。我们走了。

1 - 此图像显示屏蔽图像的文本，到目前为止一切顺利，我可以使用以下代码：

enter image description here

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

2 - 此另一个图像，文本创建相反的效果，只留下透明文本区域。这就是我想要的：

enter image description here

有人试过吗？

Answer 1

我不认为CSS可以做到这一点。但是你可以使用三个不同的嵌套元素一起破解它：

最外面的元素包含background-image
中间元素包含中间图像
内部元素包含文本，并且与最外层元素具有相同的背景图像，在第一个示例中使用background-clip:text;屏蔽。

这有效，但有点麻烦，因为你必须补偿面具背景位置才能达到预期的效果。以下是一个示例：http://jsfiddle.net/dzkTE/。

Answer 2

我设法通过几种不同的方法实现了这一目标。请在此处查看我的回答：https://stackoverflow.com/a/32476482/2315496

见下文：

您在HTML / CSS / JavaScript中寻找的方式有三种，有些方法比其他方式更为简洁。

使用<canvas>绘制您的形状和类型，并设置ctx.globalCompositeOperation="xor";其中ctx是您的画布上下文。

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

使用mix-blend-mode: screen并将文字颜色设置为黑色。

＆＃13;

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

＆＃13;

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

＆＃13;

使用-webkit-text-fill-color:transparent和-webkit-background-clip:text显示其背后的背景副本。这个需要背景副本的一些对齐以匹配原始＆＃39;背景

＆＃13;

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

＆＃13;

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

＆＃13;

这些都不可能在浏览器上运行良好，我还没有对它们进行测试！

Answer 3

path and size.

* { 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
}

Answer 4

[对不起我误解了这一点。我尝试了相反，认为：P] 我认为你可以通过使用background-clip来实现。

background-clip:text;

检查here（请尝试使用chrome或添加供应商前缀）。你可以查看demo page表格chris。

如何使用CSS应用反向文本掩码

4 个答案: