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 を応援していただければ幸いです。