背景グラデーションと自動フルスクリーンに関する 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 列のレイアウト、表は結合され、ネストされた表は許可されません
MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...
1. nginxをインストールして起動する # nginxをインストールする sudo apt-ge...
環境説明サーバーシステム: Ubuntu 18.04 64ビットnginx: 1.14この記事では主...
【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...
最近、分散型およびビッグデータ技術について学ぶために、いくつかの仮想マシンに取り組んでいます。まず、...
insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...
ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...
目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...
JavaScriptをクリックすると画像の形状が変わります(変形の応用)。参考までに具体的な内容は...
SQL 左結合、右結合、内部結合、自然結合 さまざまな結合の概要SQL には、左結合、右結合、内部結...
私はデータベースツールとして Navicat を使用しています。他のものも同様です。 1. Navi...
目次1. ヘルプ情報を使用する2. データベースの作成、削除、表示3. データベースに接続する4. ...
この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...
この読書ノートでは、主にファイルシステムに関連する操作を記録します。ディスクとディレクトリの容量ディ...
Canal は、Java を使用して開発された Alibaba のオープンソース プロジェクトです...