html – 使用CSS剪切文本

概述我尝试为CSS中的按钮创建悬停效果. 基本上,文本应该被“剪掉”其父元素,使其透视到网站背景. 我会用渐变做条纹,但我的问题是为字体添加透明度. 我查看了背景剪辑,但这与我试图实现的相反,并且会使事情变得更复杂. 有没有一种简单的方法来实现这种效果？我不介意使用JS,但如果可能的话没有jQuery. 按照我的评论和链接,使用svg,你可以得到这样的东西： http://codepen.io/gc- 我尝试为CSS中的按钮创建悬停效果.

基本上,文本应该被“剪掉”其父元素,使其透视到网站背景.
我会用渐变做条纹,但我的问题是为字体添加透明度.
我查看了背景剪辑,但这与我试图实现的相反,并且会使事情变得更复杂.
有没有一种简单的方法来实现这种效果？我不介意使用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/

总结

以上是内存溢出为你收集整理的html – 使用CSS剪切文本全部内容，希望文章能够帮你解决html – 使用CSS剪切文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。