技術

CSSのbackgroundで複数の背景色を設定してみる

投稿日:

こんにちは

仕事で複数の背景色を設定する機会がありましたので
今回はそのやり方を書いていこうと思います。

degの部分で角度を調整します。例えば180degにすると横になります。
色範囲の指定ですが、例えば0~50%の範囲を赤、50%~100%の範囲を青にしたい場合は下記の書き方になります。


background:linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%);

ポイントは範囲の始まりと終わりの部分をきちんと書かないといけません。

勿論、色は何色でも使えるので細かく設定することも可能です。

codepenでサンプルを作ったので良かったらどうぞ
codepen

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[Ionic]UnhandledPromiseRejectionWarning: CordovaError: Requirements check failed for JDK 1.8 or greater

こんにちわ。田中です。 参画しているプロジェクトで使っているのもあって、現在Io …

no image

【Angular6】画像を拡大したり、ドラッグ移動をできるようにする

こんにちは 画像を拡大したり、ドラッグ移動したい時は結構あるんじゃないでしょうか …

CentOS7でDocker内部からpingができない(外部通信できない)!

どうもなかたです CentOS7にDocker入れて、Docker内部から外に向 …

no image

[Rails]updateの時だけvalidationを実行させる

こんにちは アプリを作っていて、create時にはvalidationを実行させ …

[SSL] let’s encryptの更新でエラー?!

どうも中田です。 無料でSSL証明書が取得できる今日この頃、いかがお過ごしでしょ …