サイト制作メモ

投稿日:2017年5月10日 更新日:

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続けて書くことができるみたい。 background-positionでtop,right,bottom,leftだけでなく、X,y方向へpxや%で指定できます。 背景画像を複数置いて位置をずらしてあげるとちょっと動きのあるデザインになります。 CSSで背景画像(background)を複数指定する方法

背景にグラーデーションと画像を指定したい時

背景がベタ塗り一色の場合は background:url(画像のパス),#ccc; と書くといいのですが、グラーデーションの場合はちょっと書き方が違いました。
background:url(画像のパス) ,-moz-linear-gradient(top, #7ac630 0%, #cfe489 0%, #7ac630 100%);
	background:url(画像のパス) ,-webkit-linear-gradient(top, #7ac630 0%,#cfe489 0%,#7ac630 100%);
	background:url(画像のパス) ,linear-gradient(to bottom, #7ac630 0%,#cfe489 0%,#7ac630 100%);
	background-repeat:no-repeat;
	background-position:50%;
background-positionを%指定するといいみたいですね~ このサイトがきれいにまとまってて見やすいです。 CSSで背景にグラデーションと画像を同時に指定する

- サイト制作メモ
-

関連記事

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml <h1 ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

no image

サイト制作に役立つTips_リンク集

スタイルなどの装飾 ボタンのホバーアニメ バリエーションが豊富です。デザインのヒントに 【保存版】CSSだけで作れるホバーアニメーションボタン総まとめ 角丸とシャドウのジェネレーター 見た目で調節した ...

スライドショーの画像を切り抜いたように表示する

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回 ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

翻訳する