使用filter属性应用滤镜

最新推荐文章于 2023-12-14 10:54:35 发布

WYG2020

最新推荐文章于 2023-12-14 10:54:35 发布

阅读量249

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/wyg2020/article/details/104162314

版权

blur：设置模糊滤镜
brightness（百分比）：设置高亮滤镜
contrast（百分比）：设置对比度滤镜
drop-shadow（xofffset,yoffset, radius, color）：设置阴影滤镜。第一个参数设置阴影的水平偏移；第二个参数设置阴影的垂直偏移；第三个参数设置阴影的模糊半径，模糊半径越大，阴影越模糊；第四个参数设置阴影的颜色。
grayscale（百分比）：设置灰度滤镜
hue-rotate（Ndeg）：设置色调旋转滤镜
invert（百分比）：设置色彩反转滤镜
opacity（百分比）：设置透明度滤镜
saturate（百分比）：设置饱和度滤镜
sepia（百分比）：设置褐色滤镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    input{
        width: 520px;
    }
    </style>
</head>
<body>
    <div style="display: flex;text-align: center;">
        <figure>
            <img src="logo13.jpg" alt="android"/>
            <figcaption>原始图片</figcaption>
        </figure>
        <figure id="t">
            <img src="logo13.jpg" alt="android"/>
            <figcaption>滤镜效果</figcaption>
        </figure>
    </div>
    blur:<input type="range" min="0" max="20" value="0"
    onchange="document.getElementById('t').style.filter = 'blur(' + this.value +'px)';"/><p>
    brightness:<input type="range" min="0" max="300" value="100"
    onchange="document.getElementById('t').style.filter = 'brightness(' + this.value +'%)';"/><p>
    contrast:<input type="range" min="0" max="300" value="100"
    onchange="document.getElementById('t').style.filter = 'contrast(' + this.value +'%)';"/><p>
    drop-shadow:<input type="range" min="0" max="300" value="100"
    onchange="document.getElementById('t').style.filter = 'drop-shadow(' + this.value + 'px ' + this.value + 'px 1px rgba(255,0,0,0.5))';"/><p>
    grayscale:<input type="range" min="0" max="300" value="100"
    onchange="document.getElementById('t').style.filter = 'grayscale(' + this.value +'%)';"/><p>
    hue-rotate:<input type="range" min="0" max="300" value="100"
    onchange="document.getElementById('t').style.filter = 'hue-rotate(' + this.value + 'deg)';"/><p>
    invert:<input type="range" min="0" max="300" value="100"
    onchange="document.getElementById('t').style.filter = 'invert(' + this.value +'%)';"/><p>
    opacity:<input type="range" min="0" max="300" value="100"
    onchange="document.getElementById('t').style.filter = 'opacity(' + this.value +'%)';"/><p>
    saturate:<input type="range" min="0" max="300" value="100"
    onchange="document.getElementById('t').style.filter = 'saturate(' + this.value +'%)';"/><p>
    sepia:<input type="range" min="0" max="300" value="100"
    onchange="document.getElementById('t').style.filter = 'sepia(' + this.value +'%)';"/><p>
</body>
</html>