概要
基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩
設定と準備
・Rails
・HTML
・CSS
・Javascript(jQuery)
↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！
3日目の作業内容
・トップページのレイアウトとCSS
3日目の躓いた箇所
背景画像の上にグラデーションを
かけたいが上手くできない！
index.html.erb
<body>
<div class="a" />
</body>
index.css
body {
background-image: url(sample);
background: linear-gradient(0% red, 50% blue)
opacity: 0.5;
}
この書き方では全体にbody以下の階層全部(今回の場合要素aを含む)にopacityがかかってしまう。
結論
背景画像だけにグラデーションをかけたい場合
rgbaを使い、色の指定をしなければならなかった。
index.css
body {
background: linear-gradient(rgba(235, 114, 219, 0.8), rgba(153, 134, 241, 0.8)) fixed, url(sample) fixed;
}
このようにrgba(4つ目の数値がopacityの役割)を使い
背景画像をurl()で追記する形にすることで解決。
↧