透明になる背景イメージを作成したいと思います。CSSイメージを透明にする
グラデーションを背景画像に配置する方法はたくさんありますが、それは機能していますが、画像を透明にする方法を見つけることができません。私はそれが可能かどうか疑問に思う。
もう一度、私は画像上の勾配を探していませんが、画像自体は勾配でなければなりません。私はマスクで方法を見つけましたが、それは目に見えるものから目に見えないものまですべてのdivを作るでしょう。そのdivのすべて
いくつかのヘルプが大好きです。前もって感謝します。
webkit-mask-imageを使用できます。 WebKitのマスク用
https://developer.mozilla.org/en/docs/Web/CSS/mask-image
ブラウザのサポート：
http://css3clickchart.com/#masks
チェックJS Fiddle
コード：
content: "";
background: url(https://images-na.ssl-images-amazon.com/images/G/01/img16/pet-products/vertical-store/promo-tiles/short-tile/32445_petsproducts_march-pets-site-flip-vertical-store_9_short-tile_592x304._CB299747463_.jpg) ;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
修正します。これはまさに私が探しているものですが、マスクを使用するとそのdivのすべてが透明になります。そう、はい、これは私が探しているものですが、私はdiv自体で普通に見えるすべてが必要です。ここではテキストも退色するのがわかります。 – user3299251
これは答えです！オーバーレイするテキスト/コンテンツのZ-インデックスを変更するだけで、私はそれが欲しいのと同じです。 – user3299251
を行うことができる時間Mozillaの開発者ネットワークをチェックあなたはクロスブラウザのサポートでいくつかの問題に遭遇するかもしれません。
See older answer on stack overflow
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
<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)))
}
</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='http://verysmartbrothas.com/images/random.jpg?9fe95b' />
</body>
</html>正しい。これはまさに私が探しているものですが、マスクを使用するとそのdivのすべてが透明になります。そう、はい、これは私が探しているものですが、私はdiv自体で普通に見えるすべてが必要です。ここではテキストも退色するのがわかります。 – user3299251
の可能重複http://stackoverflow.com/questions/19713813/fade-image-to-transparent-like-a-gradient –
@ KilianStinsonだから私は "私はマスクで方法を見つけたが、それはdiv全体の目に見える目から見えないdiv。 私が使用した例ですが、そこに見ることができるようにテキストなども透明になります。それがその解決策の問題です。 – user3299251