カラー画像にCSSを適用してモノクロ画像にするには
ここではカラー画像にCSSを適用してモノクロ画像にする方法を解説します。
作成手順
-
VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article013.aspx」を作成します。
-
Webフォームのヘッダータグ内「<head>...</head>」にSTYLEタグを追加したら以下のCSSを入力します。
カラー画像をモノクロ画像にするにはCSSの「filter」プロパティに「grayscale(100%)」を設定します。
<style>
.black-white {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
</style>
-
Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQueryの最新のライブラリーを追加します。
さらに、SCRIPTタグを追加したら以下のjQueryのコードを入力します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script type="text/javascript">
// jQuery Document Ready Event...
$(function () {
// Toggle Black and White Image
$('input#toggleBlackWhite').click(function () {
$('img#blackWhiteImage').toggleClass('black-white');
});
});
</script>
-
<body>...</body>要素内にHTMLのlabel、checkbox, img要素を配置します。
<label><input id="toggleBlackWhite" class="w3-check" type="checkbox" />Toggle Black and White Image</label>
<br /><br />
<img id="blackWhiteImage" src="img/Article013/flower.jpg" alt="Flower" width="200" />
操作手順と解説
-
サンプルが表示されたら、「Toggle Black and White Image」のチェックボックスをクリックして見てください。
-
HTMLのimg要素にCSSのクラス「black-white」が追加されてカラー画像がモノクロ画像に変わります。
-
この状態で再度チェックボックスをクリックしてチェックを外します。
HTMLのimg要素からCSSのクラス「black-white」が削除されて元のカラー画像に戻ります。