【CSS】filter 滤镜

滤镜 filter

filter: none

filter: blur()

filter: brightness()

filter: contrast()

filter: drop-shadow()

filter: grayscale()

filter: hue-rotate()

filter: invert()

filter: opacity()

filter: saturate()

filter: sepia()

filter: url()

黑白图像 filter: grayscale(%)

将图像转换为灰度图像。

值默认是0。值为100%完全转为灰度图像，值为0%图像无变化。

<ul id="box">
    <h5>黑白图像</h5>
    <li>
        <img src="../img/1.png" alt="">
        <img class="grey" src="../img/1.png" alt="">
    </li> 
</ul>

.grey {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

透明度 filter: alpha(opacity=0)

<ul id="box">
    <h5>透明度</h5>
    <li>
        <p class="opacity">文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦</p>
    </li>
</ul>

.opacity {
    opacity: .2;
    filter: alpha(opacity=0);
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity = 20);
}

高斯模糊 filter: blur(5px)

 

<ul id="box">
    <h5>高斯模糊</h5>
    <li>
        <img class="blur" src="../img/1.png" alt="">
    </li>
</ul>

.blur {
    filter: blur(5px); 
}