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をインストールし、設定ファイルとして起動する詳細な説明
推薦する
Linux の操作とメンテナンスの基本的なスワップ パーティションと LVM 管理のチュートリアル
目次1. スワップパーティション SWAP 1.1 スワップファイルを作成する1.2 スワップパーテ...
プロジェクトにaxiosをカプセル化する実際のプロセス
目次序文axiosカプセル化の利点パッケージのアイデア設定の優先順位axiosインスタンス構成1. ...
Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明
目次スロットなしVue2.x スロットスロット付き名前付きスロットスロット属性なしスロットの簡単なサ...
Node.js での組み込みモジュールとカスタムモジュールの実装
1. コモンズCommonjsはNode.jsのカスタムモジュールですCommonjs 仕様は、Ja...
Vue が 4 レベルのナビゲーションと検証コードを実装する方法の例
効果： まず5つのVueインターフェースを作成する1.home.vueページ <テンプレート&...
シームレスなカルーセル効果を実現するネイティブ js
参考までに、ネイティブjsでカルーセル効果（シームレススクロール）を実現しています。具体的な内容は以...
Node.js の非同期ジェネレータと非同期反復の詳細な説明
序文ジェネレーター関数は、async/await が導入される前から JavaScript に存在し...
MySQLデーモンの起動に失敗したエラーの解決方法
MySQLデーモンの起動に失敗したエラーの解決方法数日前、公開されたウェブサイトはこれらのアクティビ...
MySQLコンテナ間のレプリケーション構成例の詳細な説明
背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...
docker ベースの redis-sentinel クラスターの構築例
1. 概要Redis Cluster は、Redis ノードのグループ間での高可用性とシャーディング...
Mysql での結合操作
結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...
MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法
0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...
小さなHTMLコードで、ページにBaiduの検索バーを追加できます。
<html> <ヘッド> <meta http-equiv="...
CSS3はNESゲームコンソールのサンプルコードを実装します
成果を達成する実装コードhtml <input type="radio" ...
DockerToolBox ファイルマウント実装コード
docker を使用すると、ファイルをマウントできない場合があります。これは、仮想マシンの共有フォル...