49

画像 (背景画像) を透明にフェードさせて、その背後にあるコンテンツが実際に見えるようにしたいと思います (かろうじて、透明度のおかげで)。

私は明らかに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));
4

3 に答える 3

84

これが必要な場合：

ここに画像の説明を入力

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

<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>

于 2013-10-31T18:51:07.980 に答える