scss [CSS] Image Grayscale（이미지그레이스케일로변환）

Posted 2021-05-18

img {
    /* Firefox 10+, Firefox on Android */
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><fecolormatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'></fecolormatrix></filter></svg>#grayscale");
 
    /* IE6-9 */
    filter: gray;
 
    /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -webkit-filter: grayscale(100%);
 
    /* Disable */
    &:hover {
        filter: none;
        -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }
}