backgroundやbox系のプロパティ

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで

背景画像の位置 background-postion

いわゆるどの位置で画像を表記するか。

background-position :水平位置　垂直位置

background-position: right 20px auto 背景画像を右から20px 、縦に関しては自動で表記

主にリンクのアイコン的な矢印の表記などで使われる。

background-positionは指定の単位によって原点が変わる？

背景画像のサイズ background-size

値、%指定→画像の大きさを直接決めたいとき　幅・高さの順

background-size :10px 10px
background-size :50％ auto

background-size :contain 背景画像全体が表示される

横幅に対して伸縮する。

background-size :cover　ボックス全体に画像が表示される。

ブロック全体を覆う。

主にメインビジュアル的な要素にして使う。

リファレンス

CSS の background-size での cover、contain、auto の違い

背景画像の固定　background-attachment

scroll ページがスクロールする。いわゆる通常のプロパティ

fixed 固定　スクロールしてもかわらない。

影 box-shadow

box-shadow (inset) 縦方向　横方向　ぼかし　拡張量　色

insetをつけると内向きの陰になる

ジェネレーター

角丸　border-radius

border-radius 半径

ジェネレーター

グラデーション　background linear-gradietn

background linear-gradietn 傾き　始点　終点

ジェネーレーター

ちなみにPhotoshopのツールにもCSSを作ってくれる機能があるようです。

その他、疑似要素(before,after)で画像の大きさをコントールしたい場合は以下のようにします。

:before content image のサイズを指定する