HTML | 画像を透過する
HTMLだけで画像を透過する方法とサンプルコードを紹介しています。
HTMLで画像を透過する
HTMLだけで画像を透過するタグや専用の属性はありませんが、はstyle属性にて「opacity」プロパティを「1.0」以下に指定する事で実装可能です。
「opacity」プロパティの値は「1」が基準値で透過なしの状態で小数点以下も指定でき、「0」で完全な透過となります。
以下は透過度を「1」「0.5」「0.1」と指定して並べたHTMLコードとサンプル画像になります。
<img style="opacity: 1;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img style="opacity: 0.5;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img style="opacity: 0.1;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">