背景グラデーションと自動フルスクリーンに関する CSS の問題 編集長は 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 列のレイアウト、表は結合され、ネストされた表は許可されません
通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...
目次1. 関数デバウンス1. 画像安定化とは何ですか? 2. 関数のスロットリング2.1 タイマーの...
目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...
指定したサイズより大きいファイルを検索するには、find コマンドを使用します。 検索 / -typ...
デフォルトでは、Docker はネットワーク化されていない UNIX ソケット上で実行されます。オプ...
この記事の例では、カルーセルカルーセルを実装するためのJSの具体的なコードを参考までに共有しています...
目次1. スタックの定義2. JSスタックの調査1. スタックとヒープ2. 基本型と参照型3. 値渡...
この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...
序文:先週の日曜日、先輩から3ページ作るのを手伝って欲しいと頼まれました。データのやり取りなどはなく...
偶然にも、SQL ステートメントを異なる MySQL インスタンスで実行すると、異なる結果が生成され...
基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...
オペレーティング·システム: Win10 ホームエディションDockerをインストールします:公式サ...
px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...
JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...
前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...