使用CSS剪切文本

Moritz Friedrich 发表于 Dev

莫里茨·弗里德里希

我尝试为CSS中的按钮创建悬停效果。
看起来应该如何完成

基本上，文本应从其父元素中“切出”，以使其透视网站背景。
我会使用渐变绘制条纹，但是我的问题是为字体添加透明度。
我查看了background-clip，但这与我尝试实现的目的相反，并使事情变得更加复杂。有没有简单的方法可以达到这种效果？我不介意使用JS，但尽可能不使用jQuery。

西里尔

使用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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。