用CSS淡化元素的頂部

Question

如何在CSS中創建類似於this的效果（右側的框）？

小問題，但總之很甜。我會發布我已經嘗試過的代碼，但我無法開始褪色整個盒子，這也足以滿足我的目的（我可以在底下添加另一個div，我需要的是褪色文本）。

Answer 1

您可以使用圖像蒙版。但是，這隻適用於非常多的Chrome。 More info。

element { 
    -webkit-mask-image: -webkit-gradient(
     linear, 
     0 0, 
     0 50%, 
     from(rgba(0, 0, 0, 0)), 
     to(rgba(0, 0, 0, 1)) 
    ) 
} 

JSFiddle

Answer 2

使用linear-gradient與rgba，從完全不透明去0相同的顏色：

div { 
    width: 400px; 
    margin: 20px auto; 
    background: rgb(163, 182, 245); 
    padding: 10px; 
    position: relative; 
} 

div:before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; 
    height: 80px; 
    background: linear-gradient(
     rgba(163, 182, 245, 1), 
     rgba(163, 182, 245, 0) 
    ); 
} 

這裏的小提琴：http://jsfiddle.net/HUHKB/

---

附：不要忘記生產中的供應商前綴...