■ ヒントだよ!HTML & CSS ■
■ CSS の 例(フィルターをかける)
- 書式
- {backdrop-filter:効果;}
■ 彩度(saturate)/明度(brightness)/コントラスト(contrast)
元画像 | saturate |
 |  |
brightness | contrast |
 |  |
- CSS
-
td { text-align: center; }
.f_brightness { filter: brightness(200%); }
.f_contrast { filter: contrast(200%); }
.f_saturate { filter: saturate(30%); }
- HTML
-
<<table>
<tr>
<td>元画像</td><td>saturate</td>
</tr><tr>
<td><img src="img/testsora.png"></td>
<td><img src="img/testsora.png" class="f_saturate"></td>
</tr><tr>
<td>brightness</td><td>contrast</td>
</tr><tr>
<td><img src="img/testsora.png" class="f_brightness"></td>
<td><img src="img/testsora.png" class="f_contrast"></td>
</tr>
</table><
© KinutaHandicraft