画像のCSS化

質問

添付のようなグラデーション画像を
トップページのバナー背景にしたいのですが
CSSで実現するにはどのような方法が簡単でしょうか。

画像をドラッグするとsvgやCSSに変換してくれるサイトなどはないでしょうか

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.1

dell_OK · ベストアンサー

CSSでグラデーションを表現する方法でしたらこんな感じでできます。
HTML
<div class="gradient"></div>
CSS
.gradient {
background: linear-gradient(
to right,
/* 左の色 */
darkgreen,
/* 中の色　ちょっと左寄り */
forestgreen 30%,
/* 右の色 */
darkgreen
);
width: 400px;
height: 30px;
}

グラデーション画像のファイルがすでにあるのでしたらこんな感じ。
HTML
<div class="gradientfile"></div>
CSS
.gradientfile {
background-image: url(gradientfile.jpg);
background-size: contain;
width: 400px;
height: 30px;
}

どちらの方法でも簡単だと思います。

画像ドラッグでCSSに変換してくれるサイトは存じません。

お礼

有難うございます。
とても参考になりました。