切出CSS文本 [英] Cut-out text with CSS

问题描述

我试图创建CSS中的一个按钮悬停效果。结果

I try to create a hover effect for a button in CSS.

基本上文本应该是'切出'它的父元素，使之成为看透到网站后台。结果
我会做条纹的渐变，但我的问题是要增加透明度的字体。结果
我看着背景的剪辑，但会做什么，我尽量做到的对面，会使事物的方式更加复杂。
有一个简单的方法来实现这种效果呢？我不介意使用JS，但没有jQuery的如果可能的话。

Basically text should be 'cut out' of its parent element, making it see-through to the sites background.
I'd do the stripes with a gradient, but my problem is to add transparency to the font.
I looked at background-clip, but that would do the opposite of what I try to achieve, and would make things way more complicated. Is there an easy way to accomplish this effect? I don't mind using JS, but no jQuery if possible.

推荐答案

跟随我的评论和链接中使用SVG，你可以得到这样的事情：
HTTP：//$c$cpen.io/gc-nomade/pen/Dqcio/

to follow my comment and links within , using svg , you can get this kind of things : 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 /笔/ wsfvg /

With CSS , you can even add transparent borders and radius to make it look weirder http://codepen.io/gc-nomade/pen/wsfvg/

这篇关于切出CSS文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！