Vueで背景色と透明度を設定する方法

Vueで背景色と透明度を設定する方法

背景色と透明度の設定

上記のように、最初の画像の場合は、灰色の背景と左上隅に白い「カバー」という文字を追加し、背景色を透明にする必要があります。

まず、rgba() 関数を知っておく必要があります。

rgba() 関数は、赤 (R)、緑 (G)、青 (B)、透明度 (A) の重ね合わせを使用して、さまざまな色を生成します。

RGBA は、Red、Green、Blue、Alpha (英語: Red、Green、Blue、Alpha) の略です。

  • (R) 色の赤の成分を表す 0 ~ 255 の整数。 。
  • (G) 色の緑の成分を表す 0 ~ 255 の整数。
  • (B) 色の青の成分を表す 0 ~ 255 の整数。
  • 透明度(A)は0~1の間の値を取り、透明度を表します。値が小さいほど透明度が高くなります。

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

まず、親要素の位置を relative に設定し、次に子要素の位置を absolute に設定し、左、右、上、下を設定して位置を調整し、最後に背景色を background: rgba (34,34,34,0.5) に設定します。

ボタンの背景色を透明に設定する

スタイルを設定するときに使用します

背景色: 未設定

3.1.0 背景色を設定する

ログイン時の背景色が設定されていません

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueは背景色の変更操作を実装します
  • Vue-cli で単一ページの背景色を設定する方法
  • Vueプロジェクトで背景画像を設定する方法
  • Vueはボタンをクリックして背景色を切り替えるサンプルコードを実装します
  • Vueで値に応じて入力の背景色を変更する例

<<:  Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)

>>:  MySQLテーブルパーティショニングプログラムを変更する方法

推薦する

MySQL スロークエリログの設定と使用方法のチュートリアル

序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...

Win 8 以降での最新の MySQL バージョン 5.7.17 (64 ビット ZIP グリーン バージョン) のインストールと展開のチュートリアル

まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...

jsで照明スイッチを制御する

参考までに、jsを使用して照明スイッチを制御します。具体的な内容は次のとおりです。トピック: js ...

Linuxシステムにおける重要なサブディレクトリの問題について話す

/etc/fstabパーティション/ディスクを自動的にマウントし、マウントするパーティション/デバイ...

MySQL ストアド プロシージャのクエリ コマンドの概要

以下のように表示されます。 mysql.proc から名前を選択します (db='データベー...

MySQL グループ化クエリと集計関数

概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい(商品の価格帯を見つけるのに役立...

Tomcat で複数の war パッケージを展開する方法と手順

1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...

IDEA の Maven プロジェクトで MySQL 8.0 に接続して使用する方法に関するチュートリアル

まず、私の基本的な開発環境を見てみましょう。オペレーティングシステム: MacOS 10.13.5 ...

TypeScript のマップされた型とより優れたリテラル型推論について説明します。

目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...

MySQL シリーズ 9 MySQL クエリ キャッシュとインデックス

目次チュートリアルシリーズ1. MySQL アーキテクチャクエリキャッシュキャッシュされないクエリ:...

IE6 および IE7 で DIV コンテナの固定高さを使用するためのヒント

IE6 と IE7 では CSS の解釈に多くの違いがあります。今日はそのうちの 1 つである高さに...

MySQL 8.0.17 のインストールと使用方法のチュートリアル図

前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...

Web インタビュー Vue カスタム コンポーネントと呼び出しメソッド

輸入:プロジェクトの要件により、同じコードの一部をコンポーネントにカプセル化し、必要な場所にインポー...

適応レイアウトの処理について(フロートとマージンネガティブマージンを使用)

適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...

MySQLデータベース最適化技術の簡単な紹介

成熟したデータベース アーキテクチャは、最初から高可用性、高スケーラビリティなどの機能を備えて設計さ...