上部の固定divは半透明効果に設定できます

上部の固定divは半透明効果に設定できます

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<title>トップ固定</title>
<スタイル タイプ="text/css">
html、本文 {オーバーフロー:hidden;マージン:0px;幅:100%;高さ:100%;}
.virtual_body {幅:100%;高さ:100%;オーバーフローy:スクロール;オーバーフローx:自動;}
.fixed_div {位置:absolute;z-index:2008;上:0px;左:0px;右:16px;高さ:40px;背景:#CCCCCC;境界線下部:3px インセット;境界線の色:#006699;
//下:20px;
//border:1px 実線赤;
//境界線スタイル:インセット;
//半透明効果の演出
//フィルター:アルファ(不透明度=50);
//-moz-不透明度:0.5;
//不透明度:0.5;
//背景:#666666;
}
</スタイル>
</head>
<本文>
<div class="fixed_div"><font color="red">鄭州大学</font></div>
<div class="virtual_body">
<div style="height:888px;">
<p>


さようなら、必ずまた会いに来ます!
</div>
</div>
</本文>
</html>

効果図は以下のとおりです。

<<:  フレックスレイアウトの改行スペースでの align-content の使用

>>:  ECMAscript の新機能の紹介

推薦する

Vue 関数のアンチシェイクとスロットリングの正しい使用方法

序文1. デバウンス: 高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されま...

MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明

目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...

htmlハイパーリンクaのクリックイベントの後、hrefで指定されたアドレスにジャンプします。

場合によっては、ジャンプを完了するために href の代わりにハイパーリンク <a> を...

CentOS6で定期的にjarプログラムを実行するスクリプトをcrontabで実行する

1. 簡単なJavaプログラムを書く パブリッククラステストシェル{ パブリック静的voidメイン(...

HTML相対パスの親ディレクトリと子ディレクトリの書き方

親ディレクトリを指定する方法../ はソース ファイルの親ディレクトリを表し、../../ はソース...

DOCTYPE要素詳細説明完全版

1. 概要この記事では、DOCTYPE要素を体系的に説明します。同時に、多くの情報を調べました。イン...

URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...

Vue はコンポーネント間の通信をどのように実装しますか?

目次1. 父と息子のコミュニケーション1.1 親コンポーネント --> 子コンポーネント1.2...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

今日は、早速本題に入り、面接中に尋ねられた質問、つまりキープアライブ コンポーネントのキャッシュ原理...

MySQL 5.7.16 無料インストール版のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 5.7.16のインストールと設定方法を記録します。具体的な内容は以下のとおり...

CSS コード省略 div+css レイアウト コード省略仕様

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...

CSS3は小さな矢印のさまざまなグラフィック効果を実現します

CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...

Vue+ElementUI で超大規模なフォーム例を処理する方法

最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...