CSS を使用して半透明の背景と不透明なテキストを実現する例
|
この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。詳細は次のとおりです。 効果は以下のとおりです。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル></タイトル>
<スタイル>
html{
背景: #6a8db1;
}
.脇に{
背景色:rgba(244,251,251,0.47);
境界線: 1px 実線 #FFFFFF;
幅: 200ピクセル;
テキスト配置: 中央;
色: #FFFFFF;
}
.aside div{
高さ: 55px;
下境界線: 1px 実線 #FFFFFF;
行の高さ: 55px;
}
.aside div フォント{
フォントの太さ: 800;
}
.aside div span {
フォントの太さ: 800;
左マージン:18px;
}
</スタイル>
</head>
<本文>
<div class="aside">
<div>
<font>待合室 1</font>
<span>10人</span>
</div>
<div>
<font>待合室 1</font>
<span>4人</span>
</div>
<div>
<font>待合室 1</font>
<span>12人</span>
</div>
<div>
<font>待合室 1</font>
<span>6人</span>
</div>
<div>
<font>待合室 1</font>
<span>8人</span>
</div>
</div>
</本文>
</html>パレットに応じて色を調整できます
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: DockerにRedisをインストールし、設定ファイルとして起動する詳細な説明
推薦する
MySQLデータストレージプロセスパラメータの詳細な例
MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...
MySQLデータ行と行オーバーフローのメカニズムの詳細な説明
1. 行の形式は何ですか? MySQL の行形式の設定は次のように表示されます。 実際、MySQL ...
MySQL 5.7.27 のインストールと設定方法のグラフィックチュートリアル
MySQL 5.7.27の詳細なダウンロード、インストール、および構成チュートリアルは参考までに、具...
入力テキストボックスの長さをコンテンツに応じて変更する方法
初め：コードをコピーコードは次のとおりです。 <input type="text&q...
Alibaba Cloud に MySQL データベースをインストールするときに発生する 2002 エラーを解決する方法
データベースのインストール中に次のエラーが発生しました: 解決策は次のとおりです。 1. binディ...
背景画像に CSS3 変換を適用するためのソリューション
CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場...
MySQL データベースの文字化け問題の原因と解決策
序文データベースのデータを表示すると、文字化けした文字が表示されることがあります。実際、どのようなデ...
Vueの計算プロパティの詳細な説明
1. 計算属性とは何ですか? 簡単に言えば、計算された結果が属性に保存されるもので、キャッシュとして...
win10にmysql 8.0.18-winx64をインストールする詳細な手順
1. まず公式ウェブサイトにアクセスしてMySQLインストールパッケージをダウンロードします参考: ...
JavaScript でモバイル モーダル ボックスの効果を実現
この記事では、モバイルモーダルボックス効果を実現するためのJavaScriptの具体的なコードを参考...
Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル
Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...
WeChatアプレットの下部にあるタブバーがコンテンツをブロックする問題に対処する簡単な方法
WeChatアプレットでタブバーを設定すると、重要なコンテンツがブロックされ、iPhoneXなどの異...
テキストエリア テキストエリアの幅と高さ 幅と高さの自動適応実装コード
コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...
MySQLトランザクションを実行するための構文とプロセスの詳細な説明
概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...
Typescriptを使用してWeChatミニプログラムでプロジェクトを作成する方法
プロジェクトを作成するWeChat開発者ツールでプロジェクトを作成し、言語でTypeScriptを選...