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

推薦する

Win32 MySQL 5.7.27 のインストールと設定方法のグラフィックチュートリアル

MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...

vue プロジェクトのデプロイと Nginx でのプロキシ設定の問題の分析

1. nginxをインストールして起動する # nginxをインストールする sudo apt-ge...

SSL を実装するために nginx を設定する方法の例

環境説明サーバーシステム: Ubuntu 18.04 64ビットnginx: 1.14この記事では主...

MySQL の WriteSet 並列レプリケーションの簡単な分析

【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...

VMWare 仮想マシン 15.X LAN ネットワーク構成チュートリアル図

最近、分散型およびビッグデータ技術について学ぶために、いくつかの仮想マシンに取り組んでいます。まず、...

ins タグと del タグの属性と使用法

insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...

Windows での MySQL 8.0.18 インストール チュートリアル (図解)

ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...

Kubernetesでポッドを作成する方法

目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...

JavaScript はクリックして画像の形状を変更する (変換アプリケーション) を実装します。

JavaScriptをクリックすると画像の形状が変わります(変形の応用)。参考までに具体的な内容は...

SQLのさまざまな結合サマリーの詳細な説明

SQL 左結合、右結合、内部結合、自然結合 さまざまな結合の概要SQL には、左結合、右結合、内部結...

MySQLは数百万のシミュレーションデータ操作コードを自動的に挿入します

私はデータベースツールとして Navicat を使用しています。他のものも同様です。 1. Navi...

MySQL データベースの基礎: 基本コマンドの概要

目次1. ヘルプ情報を使用する2. データベースの作成、削除、表示3. データベースに接続する4. ...

3Dカルーセル効果を実現するjs

この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...

Linuxファイルシステム操作の実装

この読書ノートでは、主にファイルシステムに関連する操作を記録します。ディスクとディレクトリの容量ディ...

MySQLを監視するためのbinlogログ解析ツールの詳しい説明:Canal

Canal は、Java を使用して開発された Alibaba のオープンソース プロジェクトです...