Css 带IE11和safari文本剪辑的渐变背景

下面是一个例子：

h1{
背景图像：线性渐变（向右，#00b140，#bcda00 17%，#bcda00 60%，#00b140）；
背景剪辑：文本；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

---

text1111

您可以尝试以下操作，并根据需要调整颜色

代码：

h1{
背景图像：rgba（21,182,57,1）；
背景图像：-moz线性梯度（左侧，rgba（21,182,57,1）0%，rgba（21,182,57,1）13%，rgba（141,208,16,1）10%）；
背景图像：-webkit渐变（左上、右上、颜色停止（0%，rgba（21、182、57、1））、颜色停止（100%，rgba（141、208、16、1））；
背景图像：-webkit线性梯度（左侧，rgb（21182,57）0%，rgba（141208,16,1）10%）；
背景图像：-o-线性梯度（左，rgba（21,182,57,1）0%，rgba（141,208,16,1）10%）；
背景图像：-ms线性梯度（左侧，rgba（21,182,57,1）0%，rgba（141,208,16,1）10%）；
/*背景图像：线性梯度（向右，rgb（29,53,10）0%，rgb（127,255,30）13%，rgba（83133,36,1）30%，rgba（197255,82,1）58%，rgba（197255,82,1）100%）*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#8dd010'，endColorstr='#15b639'，GradientType=1）；
背景剪辑：文本；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

---

Hello Gradient

这里是渐变背景的剪辑

/**
-webkit背景剪辑：文本多边形填充
#什么#
用SVG替换指定元素的多边形填充
在浏览器中，其中“-webkit背景剪辑：文本”
没有。
把它叉到GitHub上
https://github.com/TimPietrusky/background-clip-text-polyfill
#蒂姆·皮特鲁斯基2013
#timpietrusky.com
**/
Element.prototype.backgroundClipPolyfill=函数（）{
变量a=参数[0]，
d=文件，
b=d.body，
el=这个；
函数hasBackgroundClip（）{
返回b.style.webkitBackgroundClip！=未定义；
};
函数addAttributes（el，属性）{
for（变量键入属性）{
el.setAttribute（key，attributes[key]）；
}
}
函数createSvgElement（标记名）{
返回d.createElements（'http://www.w3.org/2000/svg，标记名）；
}
函数createSVG（）{
变量a=参数[0]，
svg=createSvgElement（'svg'），
pattern=createSvgElement（'pattern'），
image=createSvgElement（'image'），
text=createSvgElement（'text'）；
//向元素添加属性
添加属性（模式{
“id”：a.id，
“patternUnits”：“userSpaceOnUse”，
“宽度”：a.width，
“高度”：a.height
});
添加属性（图像{
“宽度”：a.width，
“高度”：a.height
});
image.setAttributeNS（'http://www.w3.org/1999/xlink“，”xlink:href'，a.url）；
添加属性（文本{
“x”：0，
y分：80分，
“类”：一个[“类”]，
'style'：'fill:url（#'+a.id+'）；'
});
//设置文本
text.textContent=a.text；
//向模式中添加元素
模式。追加子对象（图像）；
//向SVG添加元素
appendChild（模式）；
appendChild（文本）；
返回svg；
};
/*
*如果有背景剪辑，请更换该元素
*没有。
*/
如果（！hasBackgroundClip（））{
var img=新图像（）；
img.onload=函数（）{
var svg=createSVG({
“id”：a.patternID，
“url”：a.patternURL，
“类”：一个[“类”]，
“width”：此为.width，
“height”：this.height，
“文本”：el.textContent
});
el.parentNode.replaceChild（svg，el）；
}
img.src=a.patternURL；
}
};
var元素=document.querySelector（'.headline'）；
/*
*打电话给polyfill
*
*patternID：SVG模式的唯一ID
*patternURL：背景图像的URL
*类：应用于SVG的css类
*/
element.backgroundClipPolyfill({
“patternID”：“mypattern”，
'模式URL'：'http://timpietrusky.com/cdn/army.png',
“类”：“标题”
});
正文{
字体：1em无衬线；
背景：#fff；
边缘：0 1米；
}
h1{
颜色：红色；
-webkit文本填充颜色：透明；
背景：-webkit线性渐变（透明，透明），url(http://timpietrusky.com/cdn/army.png)重复；
背景：-o-线性梯度（透明，透明）；
-webkit背景剪辑：文本；
}
/*
*此样式将与SVG共享，因为
*我必须替换Firefox中的DOM元素。
*否则SVG模式将被破坏。
*/
.标题{
字体：粗体2.25em无衬线；
}
svg{
高度：8em；
宽度：100%；
}
/*
*只是一些造型。。。别理它
*/
文章{
字体大小：1.2米；
边框顶部：15em实心#7BB03B；
身高：100%；
文本对齐：居中；
}
a{
文字装饰：无；
颜色：#5794C7；
过渡：颜色。15秒轻松进出；
}
a:悬停{
颜色：#7BB03B；
}
-webkit背景剪辑：文本| Polyfill


2013年由

看看这个博客