淡出div的右側

Question

有人知道爲什麼我不能得到這個線性漸變淡出此div的右側？

• http://jsfiddle.net/yykv5mLz/
• http://colorzilla.com/gradient-editor/#ffffff+72,ffffff+100&0+72,1+100

.main a { 
 
    display: inline; 
 
} 
 
.main { 
 
    height: 50px; 
 
    overflow-x: scroll; 
 
    white-space: nowrap; 
 
} 
 
.fader { 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+72,ffffff+100&0+72,1+100 */ 
 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%); 
 
    /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(72%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1))); 
 
    /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%); 
 
    /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%); 
 
    /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%); 
 
    /* IE10+ */ 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%); 
 
    /* W3C */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); 
 
    /* IE6-9 */ 
 
    copy 
 
}

<div class="main"> 
 
    <div class="fader"> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    <a>Test</a> 
 
    </div> 
 
</div>

Answer 1

我相信你是在混淆衰落的div背景褪色的文字，這，也許是混淆的，不相同的方式工作。注意你的CSS中所有的漸變都發生在背景屬性中。這意味着只有背景會褪色，而不是文字的實際內容。這就是爲什麼在前面的答案中，藍色變爲漸變，背景會從白色變爲藍色，在這種情況下，背景是白色的，並且會漸變爲白色，並不會產生任何效果。

如果你想淡化文本本身，對於你想要做的事情，真的只有一個選項我知道，那就是創建一個淡出到白色的覆蓋，這裏是一個例子：JSFiddle

基本上你就您已經創建了一個頂部添加其他的div 並創建與下面的CSS漸變效果：

.fade { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(to right, rgba(255,255,255,0) 30%,rgba(255,255,255,1) 100%); 
    position: absolute; 
} 

這有文本的潛在下行空間不再被可選用戶進行復制/粘貼，因爲它位於另一個di的下面v，但我不相信有任何其他的方式來得到你想要的。

Answer 2

因爲梯度從白色，白去，背景是白色的......一切都是白..你永遠不會看到背景漸變的顏色。這裏是一個青色漸變代碼：

background: -moz-linear-gradient(left, rgba(255,0,0,0) 72%, rgba(0,0,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(72%,rgba(255,0,0,0)), color-stop(100%,rgba(0,0,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(255,0,0,0) 72%,rgba(0,0,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(255,0,0,0) 72%,rgba(0,0,255,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(255,0,0,0) 72%,rgba(0,0,255,1) 100%); /* IE10+ */ 
background: linear-gradient(to right, rgba(255,0,0,0) 72%,rgba(0,0,255,1) 100%); /* W3C */ 

http://jsfiddle.net/yykv5mLz/1/