CSSスタイルで実現されるHTML背景色のグラデーション効果

CSSスタイルで実現されるHTML背景色のグラデーション効果
エフェクトのスクリーンショット:

実装コード:

コードをコピー
コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<ヘッド>
<タイトル></タイトル>
<スタイル タイプ="text/css">
。リニア{
幅:100%;
高さ:600px;
フィルター: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/
背景:-moz-linear-gradient(top,#15A216,#fafafa);/*Firefox*/
背景:-webkit-gradient(線形、0% 0%、0% 100%、から(#15A216)、から(#fafafa));/*Google*/
background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #15A216),color-stop(1, #fafafa));/* Safari & Chrome*/
フィルター: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa'); /*IE6 & IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa')"; /* IE8 */
}
</スタイル>
</head>
<本文>
<div class="linear"></div>
</本文>
</html>

<<:  MySQLの結合の基本原理についての簡単な説明

>>:  CSSに基づいてマウス入力の方向を決定する

推薦する

Linuxのsortコマンドの複数のパラメータを理解するための1つの質問

sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...

uniapp 要素ノードスタイルの動的変更の詳細な説明

目次1. スタイル属性をバインドして変更するhtml:対応するjs:達成された効果:次に、refを使...

vsftpd ユーザーが ssh 経由でログインすることを禁止する方法

序文vsftp は使いやすく安全な FTP サーバー ソフトウェアです。システムユーザーまたは仮想ユ...

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

Linux CentOS インストール JDK および Tomcat チュートリアル

まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...

dockerでnginxを実行するときにdaemon offが使用される理由についての簡単な説明

とても嬉しいです。この問題に遭遇したとき、私はDockerコンテナのプロセス原理について話さなければ...

Tencent Cloud Server Centosにデータディスクをマウントする方法

まず、ハードディスクデバイスにデータディスクがあるかどうかを確認します # まずfdisk -lを実...

フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...

HTML 学習ノート - HTML 構文の詳細な説明 (必読)

1. HTML マークアップ言語とは何ですか? HTML は、Web ページの情報を表すマークアッ...

hr 水平線スタイルの例コード

コードをコピーコードは次のとおりです。 <hr style="width:490px...

CSSは、入力ボックスのフローティングテキスト効果を実現するために、placeholder-shown疑似クラスを使用します。

この記事では、:placeholder-shown 疑似クラスを使用して、純粋な CSS で浮動疑問...

Centos7のホスト名を変更する3つの方法

方法 1: hostnamectl の変更ステップ1 ホスト名を確認するホスト名ステップ2 ホスト名...

CentOS8 jdk8 / java8 のインストールチュートリアル(推奨)

序文最初はCentOS8でwgetを使ってダウンロードし、解凍して環境変数を設定するつもりだったので...

Dockerのインストール、イメージの作成、NodeJSプログラムの読み込みと実行の詳細なプロセス

システム環境: Windows 7 1. DockerをインストールするDocker公式サイトからd...

32 典型的な列/グリッドベースのウェブサイト

列ベースの Web デザインのインスピレーションをお探しの場合は、32 個のクラシックな列/グリッド...