background-imageにグラデーションをつける方法

背景画像をｃｓｓで指定して　グラデーションをかけます。

ここでは写真下部に黒のグラデーションをかけていきます。

background-imageに

linear-gradient(to top ,rgba(0,0,0,0.5),rgba(0,0,0,0),transparent)を指定します。

指定前の画像

なお、rgba(0,0,0,0.5）の0.5の部分をより大きい数字にすると不透明度が上がり、より下の黒が濃くなります。

いろいろいじってみてください。

CSS

.top{
background-image：
linear-gradient(to top ,rgba(0,0,0,0.5),rgba(0,0,0,0),transparent),
url(https://a0.muscache.com/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg);　
　　　　　　　　｝

HTML

<div class="top">
text

    </div>