使用 CSS 剪切文本

Question

我尝试在 CSS 中为按钮创建悬停效果。

基本上，文本应从其父元素中“剪掉”，使其对网站背景透明。
我会用渐变做条纹，但我的问题是为字体添加透明度。
我查看了背景剪辑，但这与我试图实现的目标相反，并且会使事情变得更加复杂。 有没有简单的方法来实现这个效果？我不介意使用 JS，但如果可能的话，不要使用 jQuery。

Answer 1

在下面的示例中，我使用 CSS mix-blend-mode，混合模式为 difference。

@import url(http://fonts.googleapis.com/css?family=Raleway:900,600,500,800,700);
* {
  box-sizing: border-box;
}
body {
  font-family: 'Raleway', sans-serif;
  background-color: white;
}
div {
  position: relative;
}
img {
  width:100%;
}
h1 {
  color: #000;
  background-color: #9c9c9c;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 10vw;
  font-weight: 900;
  text-transform: uppercase;
  mix-blend-mode: difference;
}

<div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9674/isolation-destination.jpg" alt="" />
  <h1>Let the sun shine!</h1>
</div>

View on CodePen
View my blog post on compositing and blending

Answer 2

尝试使用 Photoshop 创建仅具有轮廓且没有背景颜色的文本，然后将其保存为 .png 格式，然后将该文本放入 div 并用渐变装饰此 div。 希望这会有所帮助

检查在 Photoshop 中创建的以下图像.......

Answer 3

关注我的评论和链接，使用 svg ，你可以获得这种东西： http://codepen.io/gc-nomade/pen/Dqcio/

svg {
  position:absolute;
  background:repeating-linear-gradient(-45deg,
    transparent,
    transparent 5px,
    black 5px,
    black 10px
    );
  width:600px;
  height:300px;
  box-sizing:border-box;
  background-clip: content-box; 
  padding:60px 70px;
}
text {
  font-size:8em;
  fill:url(#textpattern);
  stroke: white;
  border:solid;
  }
div {
  position:relative;
  width:600px;
  margin:auto;
}

和标记：

    <div>
  <svg>
    <defs>
      <pattern id="textpattern" patternUnits="userSpaceOnUse" width="600" height="300" >
        <image xlink:href="http://lorempixel.com/600/300/nature/9" width="600" height="300"  x="-70px" y="-60px"/>
      </pattern>
    </defs>
    <text  y="120px" x="140px">test </text>
  </svg>
  <img src="http://lorempixel.com/600/300/nature/9" />
</div>

使用 CSS ，您甚至可以添加透明边框和半径以使其看起来更怪异http://codepen.io/gc-nomade/pen/wsfvg/