使用 CSS 剪切文本 [英] Cut-out text with CSS
问题描述
我尝试在 CSS 中为按钮创建悬停效果.
基本上,文本应该从其父元素中切出",使其透明到网站背景.
我会用渐变来制作条纹,但我的问题是为字体添加透明度.
我查看了背景剪辑,但这与我试图实现的目标相反,并且会使事情变得更加复杂.有没有简单的方法来实现这种效果?我不介意使用 JS,但如果可能的话不要使用 jQuery.
关注我的评论和里面的链接,使用 svg ,你可以得到这样的东西:http://codepen.io/gc-nomade/pen/Dqcio/
svg {位置:绝对;背景:重复线性梯度(-45度,透明的,透明5px,黑色 5px,黑色 10px);宽度:600px;高度:300px;box-sizing:border-box;背景剪辑:内容框;填充:60px 70px;}文本 {字体大小:8em;填充:网址(#textpattern);笔画:白色;边框:实心;}div {位置:相对;宽度:600px;保证金:自动;}
和标记:
使用 CSS ,您甚至可以添加透明边框和半径以使其看起来更奇怪 http://codepen.io/gc-nomade/pen/wsfvg/
I try to create a hover effect for a button in CSS.
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.
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;
}
and markup :
<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>
With CSS , you can even add transparent borders and radius to make it look weirder http://codepen.io/gc-nomade/pen/wsfvg/
这篇关于使用 CSS 剪切文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!