css - 将线性渐变与背景混合

Question

我希望允许单行元素溢出其容器并水平滚动，但需要淡出效果而不是在外部元素的边缘进行硬切割。

具有线性渐变的伪元素:

 <div class="bg">
  <span class="white">Lorem ipsum dolor....</span>
 </div>

.bg {
  width: 700px;
  height: 500px;
  margin: auto;
  position: relative;
  background: white;
  box-shadow: 0 0 23px 2px rgba(0,0,0,0.5);
  overflow: hidden;
}
.white {
  color: #4a525a;
  display: inline-block;
  padding: 0 100px;
  width: 700px;
  font-size: 40px;
  line-height: 500px;
  white-space: nowrap;
  overflow: scroll;
  -webkit-overflow-scroll: touch;
}
.bg::before {
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(to right, white 30%, transparent);
}
.bg::after {
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(to left, white 30%, transparent);
}

演示:http://codepen.io/Megagator/pen/jPLzPe?editors=110

这在 Chrome 和 Firefox 中按预期工作，但是 Safari 混合渐变和背景不正确。有没有更兼容的方法来使用 CSS 实现这种效果？

Answer 1

实际上，Safari 严格遵循透明速记的标准:

transparent
Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

http://www.w3.org/TR/css3-color/#transparent

明确声明白色透明解决了这个问题:

background-image: linear-gradient(to right, white 30%, rgba(255,255,255,0));