css - 这个和 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>