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をインストールし、設定ファイルとして起動する詳細な説明
推薦する
ボタンに醜い灰色の枠線が付いています。これを削除するにはどうすればよいですか?
ダイアログをクロージャで使用し、右上隅の向こう側に閉じるボタンがあるダイアログを描画しました。ボタン...
JS ES6 スプレッド演算子の魔法のような使い方
目次1. 属性を追加する2. 複数のオブジェクトを結合する3. オブジェクトのプロパティを削除する4...
Windows で nginx を素早くインストールし、自動的に起動するように設定する
目次1. Windows システムでの Nginx のインストールと起動プロセス: 2. 起動時にN...
ElementUIカスタムCSSスタイルが有効にならない問題を解決する
例えば、入力ボックスがあります <el-入力 ref="mySearch"...
VMware vCenter 6.7 のインストール プロセス (グラフィック チュートリアル)
背景当初は VMware の公式 Web サイトから 6.7 Vcenter をダウンロードしたかっ...
DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します
目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...
MySQL 学習データベースバックアップの詳細な説明
目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...
MySQL のレイテンシ問題とデータフラッシュ戦略プロセスの分析
目次1. MySQLレプリケーションプロセス2. MySQLの遅延問題の分析3. プロモーション期間...
Jira リバース プロキシを実装するための nginx について
概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...
Dockerでコンテナを作成するときのディレクトリ権限
昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...
Vueプロジェクトはログインと登録の効果を実現します
この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...
JavaScript の便利な配列トリック 12 選
目次アレイ重複排除1. from() を新しい Set() メソッドに重ねる2. スプレッド演算子 ...
Vant+postcss-pxtoremはブラウザ適応機能を実装します
Remレイアウトの適応Vant のスタイルでは、デフォルトで px を単位として使用します。rem ...
Dockerコンテナ間の通信と外部ネットワーク通信の操作
コンテナ間の通信1. コンテナのネットワーク共有このモードの Docker コンテナはネットワーク ...
Vue3は画像拡大鏡効果を実現します
この記事の例では、画像拡大鏡効果を実現するためのVue3の具体的なコードを参考までに共有しています。...