web-dev-qa-db-ja.com

画像をグラデーションのように透明にフェードします

画像（背景画像）を透明にフェードインして、その背後のコンテンツを実際に見ることができるようにしたいと思います（ほとんど透明のおかげです）。

私はPNG画像で明らかにそれを達成できますが、開始=>透明点を変更するたびに画像を変更するようにグラフィックデザイナーに依頼する必要があります（より多くの色が必要か、おそらく色を減らしたい透明性）。

CSS3で同じ効果を達成できる可能性はありますか？ jpg（およびpng）の透明度にグラデーションを適用しようとしましたが、PNGの透明度（および基本的にグラデーション）が既に行われていない限り、透けて見えません（cssグラデーションは使用できません）。

なにか提案を？私はウェブを一生懸命掘っていますが、正しいキーワードを使用していないか、不可能なようです。

更新1：

コードは多くの言葉以上のものを言っています、私はこのようなことをしたいと思います（しかし構文は明らかに間違っています）：

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));
csscss3gradient
34
Fire-Dragon-DoL

これが必要な場合：

enter image description here

あなたはこれを行うことができます：

<html>
  <style type='text/css'>
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
    img {
      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    }
  </style>
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
    <img src='https://i.imgur.com/sLa5gg2.jpg' />
  </body>
</html>
51
bishop

背景色（この場合は白）にフェードするだけの場合は、次の作業例を参照してください。

http://jsfiddle.net/yw9v7zm5/

画像コンテナdivの.cssは以下を使用します。

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
23
Rowe Morehouse