practice

.インバート{filter:invert(100%);}
.オパシティ{filter:opacity(30%);}
.グレー_スケール{filter:grayscale(100%);}
.コントラスト{filter:contrast(50%);}
.サーチュレイト{filter:saturate(300%);}
.セピア{filter:sepia(80%);}
.ドロップ＿シャドー{filter:drop-shadow(10px 10px 10px gray);}
.ヒュー_ローテイト{filter:hue-rotate(180deg);}
.ブラー{filter:blur(4px);}
.ブライトネス{filter:brightness(150%);}
</style>

<div id="オパシティ"><a href="#"></a></div>
 
<hr>
●●●●●●
●●●●●●
●●●●●●
<hr>
もと <img src="Balloon.jpg"width="300px;"><hr> 
インバート <img src="Balloon.jpg"class="インバート"width="300px;"><hr> 
オパシティ <img src="Balloon.jpg"class="オパシティ"width="300px;"><hr> 
グレー・スケール <img src="Balloon.jpg"class="グレー_スケール"width="300px;"><hr> 
コントラスト <img src="Balloon.jpg"class="コントラスト"width="300px;"><hr> 
サーチュレイト <img src="Balloon.jpg"class="サーチュレイト"width="300px;"><hr> 
セピア <img src="Balloon.jpg"class="セピア"width="300px;"><hr> 
ドロップ・シャドー <img src="Balloon.jpg"class="ドロップ＿シャドー"width="300px;"><hr> 
ヒュー・ローテイト <img src="Balloon.jpg"class="ヒュー_ローテイト"width="300px;"><hr> 
ブラー <img src="Balloon.jpg"class="ブラー"width="300px;"><hr> 
ブライトネス <img src="Balloon.jpg"class="ブライトネス"width="300px;">
</html>