背景のグラデーションと自動フルスクリーンを実現するCSSコード

背景のグラデーションと自動フルスクリーンを実現するCSSコード

背景グラデーションと自動フルスクリーンに関する CSS の問題

編集長は CSS の開発中に致命的な問題を発見しました。
背景色のグラデーションを設定した後、ようやくフルスクリーンカバーに調整しましたが、F11を押すと崩壊の世界が始まりました。そこでこの記事では主にCSS背景グラデーションカラーと自動フルスクリーン適応を紹介します

背景のグラデーションカラー

この記事では線形グラデーションのみを紹介します

背景のグラデーションは皆さんもよくご存知だと思います。下の写真を見てみましょう。

合わせた色もOKです。コードは以下の通りです

体{
    背景画像:
    -webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));
    //60deg はグラデーション カラーの角度を表します。自分で試すことができます。//グラデーション カラーは、最後の 2 つの色の組み合わせの結果です。もちろん、3 番目も設定できます。}

背景フルスクリーン

上の画像からわかるように、グラデーションの背景は全画面ではないため、見た目にも影響します。しかし、この時点では、エディターが幅と高さを設定していないと言う人がいるはずです。さて、効果を確認するために幅と高さを設定してみましょう。
体{
    背景画像:-webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));
    最小高さ:648px;
}

効果は以下のとおりです。

問題は、F11 キーを押してウィンドウを最大化すると次のようになることです。

明らかに問題は完全に解決されていないので、ここにアダプティブスクリーンコードを示します。

体{
    背景画像:-webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));
    背景位置: 中央 0;
    背景繰り返し: 繰り返しなし;
    背景添付: 固定;
    背景サイズ: カバー;
    -webkit-background-size: カバー;
    -o-background-size: カバー;
    -moz-background-size: カバー;
    -ms-background-size: カバー;
}
//エディターは、Google ChromeとXingyuan Browserが自動的に適応できることをテストしました//家に持ち帰ってさらに実験することができます

効果図は以下のとおりです。

CSS を使って背景グラデーションと自動フルスクリーンを実装する方法についての記事はこれで終わりです。CSS 背景グラデーションと自動フルスクリーンの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  デザインにおけるユーザーエクスペリエンスの背後にある8つのユーザー本能について話す

>>:  面接の質問: 3 行 3 列のレイアウト、表は結合され、ネストされた表は許可されません

推薦する

選択にスタイルを追加するための純粋な CSS (スクリプトなし) 実装

通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...

JavaScriptのアンチシェイクとスロットリングとは

目次1. 関数デバウンス1. 画像安定化とは何ですか? 2. 関数のスロットリング2.1 タイマーの...

MySQL タイムスタンプ比較クエリで遭遇する落とし穴と解決策

目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...

Dockerはローカルイメージとコンテナの保存場所を設定します

指定したサイズより大きいファイルを検索するには、find コマンドを使用します。 検索 / -typ...

TLS暗号化通信を使用してDockerにリモート接続する詳細な例

デフォルトでは、Docker はネットワーク化されていない UNIX ソケット上で実行されます。オプ...

カルーセルカルーセルケースのJS実装

この記事の例では、カルーセルカルーセルを実装するためのJSの具体的なコードを参考までに共有しています...

JavaScriptのスタックとコピーの詳細な説明

目次1. スタックの定義2. JSスタックの調査1. スタックとヒープ2. 基本型と参照型3. 値渡...

Vueはカスタムツリーコンポーネントを再帰的に実装します

この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...

発生したブラウザの互換性の問題と解決策(推奨)について

序文:先週の日曜日、先輩から3ページ作るのを手伝って欲しいと頼まれました。データのやり取りなどはなく...

MySQLサブクエリでorder byが効かない問題の解決方法

偶然にも、SQL ステートメントを異なる MySQL インスタンスで実行すると、異なる結果が生成され...

Nginx ロケーション設定のチュートリアル (ゼロから)

基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...

docker を使用して Windows 10 Home バージョンで Laravel 開発環境を構築する方法の詳細なチュートリアル

オペレーティング·システム: Win10 ホームエディションDockerをインストールします:公式サ...

CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...

JSはアニメーションのレイアウト変換を実装します

JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...

ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...