圖像不透明度爲1，CSS

Question

我想我的圖片看起來像以下：

圖像的底部是透明的，它越來越不透明度1. 頂我可以做這個效果一種顏色，帶線性漸變：

-webkit-linear-gradient(black, transparent); 

但是圖片也可以嗎？

Answer 1

我知道的最新和最酷的方式是使用HTML 5掩碼。

它是這樣的：

CSS：

.masked 
{ 
    mask: url(#m1); 
} 

HTML 5：

<svg width="0" height="0"> 
    <defs> 
    <linearGradient id="gradient" x1="0" y1="0" x2 ="0" y2="100%"> 
     <stop stop-color="white" offset="0"/> 
     <stop stop-color="black" offset="1"/> 
    </linearGradient> 

    <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
     <rect y="0.1" width="1" height="0.9" fill="url(#gradient)" /> 
    </mask> 
    </defs> 
</svg> 

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="350"> 
    <image xlink:href="http://upload.wikimedia.org/wikipedia/commons/4/4d/Iss007e10807_darker.jpg" 
      width="500" height="350" class="masked"></image> 
</svg> 

jsFiddle Demo

---

對於進一步閱讀：

• Applying SVG effects to HTML content（Live example）
• CSS Masking
• Create Vector Masks using the HTML5 Canvas

Answer 2

我與CSS :)

Codepen例如嘗試：http://cdpn.io/hzBav

CSS（更新與淡出）

figure { 
    display: inline-block; 
    position: relative; 
} 

.overlay { 
    display: block; 
    height: 300px; 
    position: absolute; 
    width: 300px; 

    background-image: -moz-linear-gradient(
    rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 85% 
); 
} 

.overlay:after { 
    content: ''; 
    display: block; 
    height: 300px; 
    width: 300px; 

    background-image: -moz-linear-gradient(
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100% 
); 
} 

HTML基於評論

<figure> 
    <div class='overlay'></div> 
    <img src='http://placekitten.com/300/300' /> 
</figure> 

更新。