IEで背景クリップのテキストが機能しない

Question

テキストをグラデーション形式で表示する必要があります。以下問題はIEの "テキスト背景クリップ;" ある例

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; 
} 

あります動かない。これを解決する方法を提案するか、代替手段があることを示唆してください。

Answer 1

http://caniuse.com/#search=background-clipによると、background-clipはIE11以降でのみサポートされています。以前のバージョンのIEでは動作しません。

また、あなたが共有したコードからは、実際にbackground-clipプロパティを使用しているのではなく、-webkit-background-clipのように見えます。このベンダープレフィックス付きのプロパティは、Webkitブラウザ（Chrome、Safariなど）でのみ機能します。標準プロパティも追加する必要があります。

これを回避するためのポリフィルがあります。ここで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>

Answer 2

私はIEがそれをサポートしていないという主張にバックアップすることができます。エッジの上に、IE 11に

<h1>[icon color="#FFE729" icon="kt-icon-stop" size="70px" float="left"]<span class="innershadow">DIE PRAXEN</span></h1> 

.innershadow { 
    background-color: #000; 
    color: transparent; 
    text-shadow: 0px 2px 2px rgba(255,255,255,0.5); 
-webkit-background-clip: text; 
-moz-background-clip: text; 
     background-clip: text; 
} 

これはちょうど黒の四角形を示しています。段落のタイトル（黄色の四角を持つもの）に使用されているhttp://hot.o-zen.de/

コード：ここで は私が働いているテストサイトです、テキストは黒で、ChromeとFirefoxではうまく見えます。

ベストアンサー、 B.アンダー