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严格遵循透明速记的标准：

透明
完全透明。此关键字可以视为简写透明黑色，rgba（0,0,0,0），这是它的计算值。

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

明确说明白色透明可以解决这个问题：

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

Answer 2

使用rgb(255,255,255,0)代替transparent。

.bg::after {
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(to left, #fff 30%, rgba(255,255,255,0));
}

将线性渐变与背景混合

2 个答案: