这个和 MSIE 是否有优雅的降级选项？

Question

有谁能想到一个优雅的降级选项吗？它在 Chrome 和 Firefox 中看起来不错，但由于 MSIE 不支持该文本剪辑 CSS 选项，因此在该浏览器中看起来很差。

div#svg-heading {
  font-size: 300%;
  font-family: Arial black;
  color: #aaa;
  transform: translate(65px, 15px);
}
div#svg-heading a {
  text-decoration: none;
  color: #aaa;
  font-style: normal;
  background-image: linear-gradient(#aaa, rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="svg-heading">
  <a href="/svg.html">NEW SVG CHARTS</a>
</div>

Answer 1

我认为 background-clip: text 不可能实现纯 CSS 的优雅降级，因为这涉及将渐变设置为元素的背景图像，因此当属性不是被UA识别了，还是在元素上留下了背景图，显得丑

可以使用 JavaScript 识别浏览器，然后决定是否应用属性但在我看来，像下面这样使用 SVG 会简单得多片段。

这已经过测试，发现在 Chrome、Firefox、Opera、Edge、IE11、IE10 和 IE9 中运行良好。

<svg height="200px" width="100%">
  <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#aaa" />
    <stop offset="80%" stop-color="white" stop-opacity="0" />
  </linearGradient>
  <a xlink:href="/svg.html">
    <text x="20" y="50" fill="url(#grad)" style="font-family: Arial black; font-size: 300%">NEW SVG CHARTS</text>
  </a>
</svg>

或者，如果背景是已知的纯色（并且不需要是透明的），那么您可以按照以下方法来模仿 background-clip: text 效果。

div#svg-heading {
  font-size: 300%;
  font-family: Arial black;
  color: #aaa;
  transform: translate(65px, 15px);
}
div#svg-heading a {
  position: relative;
  text-decoration: none;
  color: #aaa;
  font-style: normal;
}
div#svg-heading a:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0px;
  border: 1px solid;
  background-image: linear-gradient(transparent, rgba(255, 255, 255, 1) 80%);
  pointer-events: none;
}

<div id="svg-heading">
  <a href="/svg.html">NEW SVG CHARTS</a>
</div>

或者如果您想坚持现有的方法，那么您可以使用 JS 检测浏览器，然后决定是否设置 background-image 属性。这样它将在 IE 中正常显示 文本，而其余的将具有淡入淡出效果。

注：判断浏览器是否为IE的逻辑摘自this answer。

window.onload = function() { var isIE = /*@cc_on!@*/ false || !!document.documentMode; if (!isIE) { document.getElementById('anchor').style['background-image'] = 'linear-gradient(#aaa, rgba(255, 255, 255, 0) 80%)'; } }

div#svg-heading { font-size: 300%; font-family: Arial black; color: #aaa; transform: translate(65px, 15px); } div#svg-heading a { text-decoration: none; color: #aaa; font-style: normal; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

<div id="svg-heading"> <a href="/svg.html" id='anchor'>NEW SVG CHARTS</a> </div>

这个和 MSIE 是否有优雅的降级选项？

Is there a graceful degradation option for this and MSIE?

css

background

clip