淡出背景幫助 - CSS

這是我的工作示例link。我想稍微縮短一些，這樣它就不會太靠近右側的末端。有什麼建議麼？淡出背景幫助 - CSS

.order-page-left { 
 
    width: 275px; 
 
    background: white; 
 
} 
 
.orders-list .item { 
 
    display: block; 
 
    border-bottom: 1px solid #e0e0e0; 
 
    color: #181818; 
 
    outline: 0; 
 
    position: relative; 
 
} 
 
.orders-list .item .inner { 
 
    padding: 7px 0 10px; 
 
} 
 
.orders-list .item .inner:before { 
 
    content: ""; 
 
    height: 100%; 
 
    width: 30px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white)); 
 
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); 
 
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); 
 
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); 
 
} 
 
.orders-list .item .detail { 
 
    float: left; 
 
    padding: 0 0 0 15px; 
 
    width: 50px; 
 
} 
 
.orders-list .item .detail .smaller { 
 
    font-size: 12px; 
 
    color: #808080; 
 
} 
 
.orders-list .item .name { 
 
    margin-left: 65px; 
 
} 
 
.orders-list .item .name .info { 
 
    font-size: 12px; 
 
    color: #808080; 
 
}

<div class="order-page-left"> 
 
    <div class="orders-list"> <a id="documentLink0" href="/service/sales/documents/order/quickView.do?envId=406519&amp;isDraft=false&amp;isNewDoc=true&amp;docStatus=" class="item highligh"> 
 

 

 
     <!-- onClick="getDocumentDetails(this, event);" --> 
 
     <div class="inner cfx"> 
 
     <div class="detail"> 
 

 
      <b> 
 
\t \t \t \t \t \t \t 
 
           <span class="showDate"> 
 
            <span class="date" style="display: none;">03.07 
 
            </span> 
 
            <span class="exp_date"> 
 
            </span> 
 
            <span class="docDate" style="display: inline;">11.05 
 
            </span> 
 
           </span> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t </b> 
 

 
      <div class="smaller"> 
 
      <span class="showDate"> 
 
            <span class="date" style="display: none;">11:25 
 
            </span> 
 
      <span class="exp_date"> 
 
            </span> 
 
      <span class="docDate" style="display: inline;">09:07 
 
            </span> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     <div class="name"> 
 
      <b>AUTO EDIBUYER1</b> 
 

 

 

 
      <div class="info"> 
 
      142.81 JMETER_20150703112433000000120:1:L 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </a> 
 

 
    </div> 
 
</div>

來源

2015-07-03 fishera

尋求調試幫助的問題（「爲什麼這個代碼不工作？」）必須包含所需的行爲，特定的問題或錯誤以及在問題本身**中重現**所需的最短代碼。 –

據我理解你的問題，你需要僞元素的寬度更改爲類似60像素。您還需要將顏色停止更改爲50％。這是更新的小提琴：http://fiddle.jshell.net/nt2z1chv/1/

來源

2015-07-03 12:02:40 Dodekeract

您可以通過更改漸變中的百分比值來調整淡入淡出效果。

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

將0％更改爲更高的值會縮短它。或者，只需更改元素的寬度。

來源

2015-07-03 12:03:13 kthornbloom

淡出背景幫助 - CSS

回答

相關問題