具有淡出效果的水平线

Question

我试图用像这样的渐变外观替换bootstrap <hr />。

到目前为止，我已尝试使用此mixin：

.horizontal-gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background-image: -webkit-linear-gradient(left, @startColor, @endColor);
  background-image: -moz-linear-gradient(left, @startColor, @endColor);
  background-image: -ms-linear-gradient(left, @startColor, @endColor);
  background-image: -o-linear-gradient(left, @startColor, @endColor);
}

但......它没有用。

修改

我决定创建一个单独的类（<hr/>可能会像将来一样有用）。但是，我仍然无法让这个工作......

＆＃13;

＆＃13;

.post-title-line {
  background-color: #403a41;
  background-image: -webkit-gradient(linear, left top, right top, from(#403a41), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  width: 100%;
  height: 1px;
  position: relative;
}

＆＃13;

<div class="post-title-line"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<强>原因：

你的问题不在于mixin，而在于颜色的选择。 rgba(0,0,0,0)相当于transparent，但您已在选择器中设置了background-color。因此，您的渐变有效地从#403a41变为#403a41，这只会产生实线。

您可以通过将background-color更改为选择器中的其他内容来验证此行为。在下面的代码片段中，我将其设置为红色，以便您可以看到我的意思。

＆＃13;

＆＃13;

.post-title-line {
  background-color: red;
  background-image: -webkit-gradient(linear, left top, right top, from(#403a41), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  width: 100%;
  height: 1px;
  position: relative;
}

＆＃13;

<div class="post-title-line"></div>

＆＃13;

＆＃13;

＆＃13;

<强>解决方案：

理想解决方案将修改mixin代码，如下所示，只使用background属性。识别渐变的较新浏览器将覆盖第一个属性（纯色），而不识别渐变的浏览器将继续使用它。

.horizontal-gradient (@startColor: #eee, @endColor: white) {
  background: @startColor;
  background: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(left, @startColor, @endColor);
  background: -moz-linear-gradient(left, @startColor, @endColor);
  background: -ms-linear-gradient(left, @startColor, @endColor);
  background: -o-linear-gradient(left, @startColor, @endColor);
}

如果您无法更改mixin ，则可以在调用mixin后覆盖background-color（至transparent）或设置{{1颜色为endColor。

我会推荐前者，因为rgba(255,255,255,1)相当于rgba(255,255,255,1)，如果您的网页背景不是白色，而transparent and rgba(0,0,0,0) are the same as per W3C spec可能不合适。

请注意，此解决方案会对不支持渐变的旧浏览器的后备产生影响。他们什么也看不见，而不是实线。

＆＃13;

＆＃13;

white

＆＃13;

.post-title-line {
  background-color: #403a41;
  background-image: -webkit-gradient(linear, left top, right top, from(#403a41), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  width: 100%;
  height: 1px;
  position: relative;
  background-color: transparent; /* add this line after the mixin call */
}

＆＃13;

＆＃13;

＆＃13;