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テーブルパーティショニングプログラムを変更する方法

推薦する

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

Dockerデータストレージのバインドマウントの詳細な説明

この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...

MySQL マルチマスターと 1 スレーブのデータバックアップ方法のチュートリアル

概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...

HTML ウェブページ作成のための 8 つの強力なテクニック

<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...

Mybatis ファジークエリ実装方法

Mybatis ファジークエリ実装方法mybatis のリバース アシスタントは非常に使いやすく、通...

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...

コンテンツの位置をランダムにドラッグするHTMLを実装する2つの方法

テスト: Chrome v80.0.3987.122 は正常です方法は2つあります。通常のラベルの位...

VUEのデータプロキシとイベントの詳細な説明

目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...

MySQL の「特殊キーが長すぎます」の解決策

目次解決策1解決策2テーブルを作成するときに、興味深い問題に遭遇しました。「指定されたキーが長すぎま...

抽選効果を実現するJavaScript

この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有...

myisamchk および mysqlcheck ツールを使用して破損した MySQL データベース ファイルを迅速に修復する方法

サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...

Matlab による JavaScript プログラミング、重心アルゴリズムによる位置決め学習

目次Matlab セントロイドアルゴリズムMatlab はクローズドな商用ソフトウェアであり、米国政...

MySQLの使用中に発生した問題

ここでは、MySQL の使用中に発生するいくつかの問題とその解決策を示します。 sql_mode=o...

React Fiber構造の作成手順

目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...

JavaScript の new 演算子の原理と例の詳細な説明

新しい用途new の機能は、コンストラクターを通じてインスタンス オブジェクトを作成することです。イ...