cssのtransparentについて理解する

概要

transparentとは

• 色を決めるプロパティの値に使われるもので設定すると透明になります
• 透明度の調整ができないです

背景 🖼️

業務のcssのコードを見ているとtransparentというものがあり、初めて知りました。
cssのスキルが伸び代しか無い為、今回はtransparentについて勉強します。

transparentとは 🕵️

色を決めるプロパティの値に使われるもので設定すると透明になります。

背景色をtransparentにする 🎨

See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.

以下は同じです。

background-color: transparent;
background-color: none;

枠線をtransparentにする 🎨

See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.

border-color: transparent;は境界線の色のみを透明にします。

境界線の幅は実際にはあります。

注意点 🚨

こちらの記事にも紹介されていましたが、透明度の調整ができないことです。

参考 ✨

• MDN background

• 【初心者でもわかる】cssで使われる透明3種類の使い方

• CSSのtransparent（トランスペアレント）で要素を透明にする

最後に

transparentについて少しは理解できました。