背景のグラデーションと自動フルスクリーンを実現する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 列のレイアウト、表は結合され、ネストされた表は許可されません