背景剪辑文本在 IE 中不起作用 [英] background clip text is not working in IE

问题描述

我需要以渐变格式显示文本.下面是例子

HTML

免费账号

css

.banner{字体系列:Univers LT Std Bold；字体大小:18pt；字体粗细:粗体；/* 背景:浅蓝色；*/背景:-webkit-linear-gradient(right,#00853f 20%, #8cc63f 80%);背景:-ms-线性梯度(右，#00853f 20%，#8cc63f 80%)；颜色:透明；-webkit-background-clip:文本；-webkit-text-fill-color:透明；}

问题出在 IE 中的background-clip: text;"不管用.请建议如何解决此问题，或者请建议是否有其他替代方法.

解决方案

根据 http://caniuse.com/#search=background-clip, background-clip 仅在 IE11 或更高版本中支持.它不适用于早期版本的 IE.

此外，从您共享的代码来看，您实际上并没有使用 background-clip 属性，而是使用 -webkit-background-clip 属性.该供应商前缀属性仅适用于 Webkit 浏览器(例如 Chrome、Safari).您还需要添加标准属性.

有 polyfill 可以帮助解决此问题.以下是 https://codepen.io/TimPietrusky/pen/cnvBk 的示例:

/**-webkit-background-clip: 文本 Polyfill# 什么?#用 SVG 替换指定元素的 polyfill在浏览器中-webkit-background-clip: text"不可用.在 GitHub 上 forkhttps://github.com/TimPietrusky/background-clip-text-polyfill# 2013 年，蒂姆·皮特鲁斯基 (Tim Pietrusky)# timpietrusky.com**/Element.prototype.backgroundClipPolyfill = function () {var a = arguments[0],d = 文件，b = d.body,el = 这个;函数 hasBackgroundClip() {返回 b.style.webkitBackgroundClip != undefined;};函数 addAttributes(el, 属性) {for (var key in attributes) {el.setAttribute(key, attributes[key]);}}函数 createSvgElement(tagname) {return d.createElementNS('http://www.w3.org/2000/svg', tagname);}函数 createSVG() {var a = arguments[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,'class' : a['class'],'style' : 'fill:url(#' + a.id + ');'});//设置文本text.textContent = a.text;//将元素添加到模式pattern.appendChild(image);//向SVG添加元素svg.appendChild(模式);svg.appendChild(text);返回svg；};/** 如果背景剪辑替换元素* 不可用.*/如果 (!hasBackgroundClip()) {var img = new Image();img.onload = 函数(){var svg = createSVG({'id' : a.patternID,'url' : a.patternURL,'class' : a['class'],'宽度' : this.width,'高度':this.height，'文本':el.textContent});el.parentNode.replaceChild(svg, el);}img.src = a.patternURL;}};var element = document.querySelector('.headline');/** 调用 polyfill** patternID : SVG 模式的唯一 ID* patternURL : 背景图片的 URL* class : 应用于 SVG 的 css-class*/element.backgroundClipPolyfill({'patternID' : 'mypattern','patternURL' : 'http://timpietrusky.com/cdn/army.png','类':'标题'});

body {字体:1em sans-serif；背景:#fff;边距:0 1em；}h1{红色;-webkit-text-fill-color:透明；背景:-webkit-linear-gradient(transparent, transparent), url(http://timpietrusky.com/cdn/army.png) 重复；背景:-o-线性渐变(透明，透明)；-webkit-background-clip:文本；}/** 此样式将与 SVG 共享，因为* 我必须替换 Firefox 中的 DOM 元素.* 否则 SVG 模式将被破坏.*/.headline {字体:粗体 2.25em sans-serif；}SVG {高度:8em；宽度:100%；}/** 只是一些样式...忽略它*/文章 {字体大小:1.2em；边框顶部:.15em 实心 #7BB03B；高度:100%；文本对齐:居中；}一种 {文字装饰:无；颜色:#5794C7；过渡:颜色 0.15 秒缓入缓出；}一个:悬停{颜色:#7BB03B；}

-webkit-background-clip: text |Polyfill 
<文章><p><a href="https://github.com/TimPietrusky/background-clip-text-polyfill" target="_blank">在 GitHub 上 fork</a></p><p>2013 年由<a href="https://twitter.com/TimPietrusky" target="_blank">@TimPietrusky</a></p></article>

I have requirement to display the text in a gradient format. Below is the example

Html

<div class="banner">Free account</div>

css

.banner{
    font-family: Univers LT Std Bold;
    font-size: 18pt;
    font-weight: bold;
    /* background: lightblue; */
    background: -webkit-linear-gradient(right,#00853f 20%, #8cc63f 80%);
    background: -ms-linear-gradient(right,#00853f 20%, #8cc63f 80%);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

The problem is in IE the "background-clip: text;" is not working. Please suggest how to resolve this or please suggest is there any alternative way.

解决方案

According to http://caniuse.com/#search=background-clip, background-clip is only supported in IE11 or later. It won't work in earlier versions of IE.

Also, from the code you've shared it doesn't look like you are actually using the background-clip property but rather -webkit-background-clip. That vendor-prefixed property will only work for Webkit browsers (e.g., Chrome, Safari). You need to add the standard property as well.

There are polyfills to help workaround this. Here's an example from https://codepen.io/TimPietrusky/pen/cnvBk:

 /**
  -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>

这篇关于背景剪辑文本在 IE 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！