背景にCSSを使用し、その上に画像を配置してフェード効果を作成するにはどうすればよいですか？

作成するにはその外観では、画像をdivの背景として設定し、divに「黒からクリア、黒」のグラデーションを作成して、画像の上に表示することができます。

.slideBanner{ background-image: url("../images/Ramsey.jpg"); } .slideBanner{ background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0) 48%, rgba(2,2,2,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6000000", endColorstr="#020202",GradientType=1 ); /* IE6-9 */ } 

このグラデーションコードは、多くのグラデーションジェネレーターの1つから見つかりました： http://www.colorzilla.com/gradient-editor/

次の設定で：

実際には、CSSで背景をコンマで区切って連鎖させることができます。最初のものは最低で、2番目のものはその上にあります。したがって、最初に画像を設定し、次にグラデーションを設定するだけです。

最新のブラウザでブレンドモードを使用して、画像に優れたブレンド効果を与えることもできます。

I 「必要なブラウザプレフィックスを生成するのはあなたに任せます（他の回答にリンクされているジェネレータはそのために非常に良いものです）。

.slideBanner{ background: url("https://placeimg.com/500/500/nature") 0 0 no-repeat, radial-gradient(ellipse at center, rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%); background-blend-mode: multiply; } 

JSfiddle証明： https://jsfiddle.net/synu8xk1/2/