使用filter属性应用滤镜

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>

blur滤镜效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值