画像に半透明フィルターを付けたような処理

画像に半透明フィルターを付けたようなCSS

画像に半透明処理のやり方が分からなかったので調べてやって見ました。

• HTMLファイルの記載内容

<div class="filter"><img class="img" src="xxx.jpg"></div>

• CSSファイルの記載内容

.filter {
    background-color: black; /** 半透明で加工したい色合い */
}
.img {
    opacity: 0.5; /** 画像の透明度 */
    display: block;
}

• 加工前

• 加工後

これで無事に半透明処理を加えたようになりました。

以上