与文本剪辑的梯度背景为IE11和徒步旅行队
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了与文本剪辑的梯度背景为IE11和徒步旅行队相关的知识，希望对你有一定的参考价值。
以下示例：
h1 {
background-image: linear-gradient(to right, #00b140, #bcda00 17%, #bcda00 60%, #00b140);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<h1>Text11111</h1>缺乏完整的跨浏览器支持。有什么建议？
答案
这是用于渐变背景的剪辑
/**
-webkit-background-clip: text Polyfill
# What? #
A polyfill which replaces the specified element with a SVG
in browser where "-webkit-background-clip: text"
is not available.
Fork it on GitHub
https://github.com/TimPietrusky/background-clip-text-polyfill
# 2013 by Tim Pietrusky
# timpietrusky.com
**/
Element.prototype.backgroundClipPolyfill = function () {
var a = arguments[0],
d = document,
b = d.body,
el = this;
function hasBackgroundClip() {
return b.style.webkitBackgroundClip != undefined;
};
function addAttributes(el, attributes) {
for (var key in attributes) {
el.setAttribute(key, attributes[key]);
}
}
function createSvgElement(tagname) {
return d.createElementNS('http://www.w3.org/2000/svg', tagname);
}
function createSVG() {
var a = arguments[0],
svg = createSvgElement('svg'),
pattern = createSvgElement('pattern'),
image = createSvgElement('image'),
text = createSvgElement('text');
// Add attributes to elements
addAttributes(pattern, {
'id' : a.id,
'patternUnits' : 'userSpaceOnUse',
'width' : a.width,
'height' : a.height
});
addAttributes(image, {
'width' : a.width,
'height' : a.height
});
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', a.url);
addAttributes(text, {
'x' : 0,
'y' : 80,
'class' : a['class'],
'style' : 'fill:url(#' + a.id + ');'
});
// Set text
text.textContent = a.text;
// Add elements to pattern
pattern.appendChild(image);
// Add elements to SVG
svg.appendChild(pattern);
svg.appendChild(text);
return svg;
};
/*
* Replace the element if background-clip
* is not available.
*/
if (!hasBackgroundClip()) {
var img = new Image();
img.onload = function() {
var svg = createSVG({
'id' : a.patternID,
'url' : a.patternURL,
'class' : a['class'],
'width' : this.width,
'height' : this.height,
'text' : el.textContent
});
el.parentNode.replaceChild(svg, el);
}
img.src = a.patternURL;
}
};
var element = document.querySelector('.headline');
/*
* Call the polyfill
*
* patternID : the unique ID of the SVG pattern
* patternURL : the URL to the background-image
* class : the css-class applied to the SVG
*/
element.backgroundClipPolyfill({
'patternID' : 'mypattern',
'patternURL' : 'http://timpietrusky.com/cdn/army.png',
'class' : 'headline'
});body {
font: 1em sans-serif;
background: #fff;
margin: 0 1em;
}
h1 {
color: red;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent), url(http://timpietrusky.com/cdn/army.png) repeat;
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
}
/*
* This style will be shared with the SVG because
* I have to replace the DOM element in Firefox.
* Otherwise the SVG pattern will be broken.
*/
.headline {
font: bold 2.25em sans-serif;
}
svg {
height: 8em;
width: 100%;
}
/*
* Just some styling... ignore it
*/
article {
font-size: 1.2em;
border-top: .15em solid #7BB03B;
height: 100%;
text-align: center;
}
a {
text-decoration: none;
color: #5794C7;
transition: color .15s ease-in-out;
}
a:hover {
color: #7BB03B;
}<h1 class="headline">-webkit-background-clip: text | Polyfill</h1>
<article>
<p>
<a href="https://github.com/TimPietrusky/background-clip-text-polyfill" target="_blank">Fork it on GitHub</a>
</p>
<p>
2013 by <a href="https://twitter.com/TimPietrusky" target="_blank">@TimPietrusky</a>
</p>
</article>另一答案
您可以尝试以下操作并根据需要调整颜色！
码：
h1 {
background-image: rgba(21, 182, 57,1);
background-image: -moz-linear-gradient(left, rgba(21, 182, 57,1) 0%, rgba(21, 182, 57,1) 13%, rgba(141, 208, 16,1) 10%);
background-image: -webkit-gradient(left top, right top, color-stop(0%, rgba(21, 182, 57,1)), color-stop(100%, rgba(141, 208, 16,1)));
background-image: -webkit-linear-gradient(left, rgb(21, 182, 57) 0%, rgba(141, 208, 16,1) 10%);
background-image: -o-linear-gradient(left, rgba(21, 182, 57,1) 0%, rgba(141, 208, 16,1) 10%);
background-image: -ms-linear-gradient(left, rgba(21, 182, 57,1) 0%, rgba(141, 208, 16,1) 10%);
/* background-image: linear-gradient(to right, rgb(29, 53, 10) 0%, rgb(127, 255, 30) 13%, rgba(83,133,36,1) 30%, rgba(197,255,82,1) 58%, rgba(197,255,82,1) 100%); */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dd010', endColorstr='#15b639', GradientType=1 );
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<h1>Hello Gradient</h1>以上是关于与文本剪辑的梯度背景为IE11和徒步旅行队的主要内容，如果未能解决你的问题，请参考以下文章
除了数据 url 之外，如何让伪元素上的剪辑路径 SVG 在 IE11/Edge 中工作？