SCC3中filter的运用

最新推荐文章于 2021-07-12 17:47:01 发布

Solaris秋

最新推荐文章于 2021-07-12 17:47:01 发布

阅读量355

点赞数

分类专栏：前端网页设计文章标签： css3 css html5 html

本文链接：https://blog.csdn.net/L1194774003/article/details/104168038

版权

前端网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

filter属性

在设置img图片时，可以通过filter属性为图片设置滤镜，他有多个属性值，可以将一张图片设置成多种不同的形式

属性值

opacity(0 ~ 1 / %)：设置透明度，为1（100%）时，图片完全显示，为0（0%）时图片将完全透明
blur(px)：设置模糊，为像素值，数值越大，则越模糊
brightness(%)：设置高亮，数值为百分比，默认为1（100%）小于100%则变暗，大鱼100%则变亮
下图为增亮效果
contrast(%)：设置对比度，默认为100%，为0%则图片消失，大于100%则意味着会运用更低的对比。下为小于100%的效果
drop-shadow(阴影的水平位移(px)，阴影的垂直位移(px)，阴影的模糊半径(px)，阴影的颜色) ：设置阴影，格式如同设置box-shadow一样，下图为drop-shadow(20px,20px,1px,rgba(255.0.0.0.5)，红色，颜色透明度为0.5时候的阴影效果
grayscale(%)：设置灰度，默认为0，为100%时则图片完全变灰。如下为设置100%时的情况
hue-rotate(deg)：设置色调旋转，括号内为角度值，它设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。角度值最大为360deg，理论无最大值，超过360则相当于多绕了一整圈，下图为角度240°时的效果
invert(%)：设置色彩反转，值为0% ~ 100%，默认为0%即无变化，100表示完全反转，为50%则会使图片消失变灰色，下图为颜色完全翻转的情况
saturate(%：设置饱和度，默认为100%，最小为0%表示图片完全不饱和，下图为小于100%的情况，也可大于100%，图片将会更加饱和
sepia(百分比)：设置褐色，值为0%-100%，默认为0图片无变化，为100%则表示图片完全深褐色化，如同老照片一样的效果

展示效果的样例

在figure标签内的img标签添加两个图片路径，运行网页看到效果

<!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="XXX.png" alt="android">
            <figcaption>原始图片</figcaption>
        </figure>
        <figure id="t">
            <img src="XXX.png" alt="android">
            <figcaption>滤镜效果</figcaption>
        </figure>
    </div>
    opacity:<input type="range" min="0" max="100" value="100"
    oninput="document.getElementById('t').style.filter = 'opacity(' + this.value + '%)';"></p>

    blur:<input type="range" min="0" max="20" value="0"
    oninput="document.getElementById('t').style.filter = 'blur(' + this.value + 'px)';"></p>

    brightness:<input type="range" min="0" max="300" value="100"
    oninput="document.getElementById('t').style.filter = 'brightness(' + this.value + '%)';"></p>

    contrast:<input type="range" min="0" max="300" value="100"
    oninput="document.getElementById('t').style.filter = 'contrast(' + this.value + '%)';"></p>

    drop-shadow:<input type="range" min="0" max="20" value="0"
    oninput="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="100" value="0"
    oninput="document.getElementById('t').style.filter = 'grayscale(' + this.value + '%';"></p>

    hue-rotate:<input type="range" min="0" max="360" value="0"
    oninput="document.getElementById('t').style.filter = 'hue-rotate(' + this.value + 'deg)';"></p>

    invert:<input type="range" min="0" max="100" value="0"
    oninput="document.getElementById('t').style.filter = 'invert(' + this.value + '%)';"></p>

    saturate:<input type="range" min="0" max="300" value="100"
    oninput="document.getElementById('t').style.filter = 'saturate(' + this.value + '%)';"></p>

    sepia:<input type="range" min="0" max="100" value="0"
    oninput="document.getElementById('t').style.filter = 'sepia(' + this.value + '%)';"></p>

</body>
</html>

运行，拖动滚动条即可看到想要设置的属性值的效果
在这里插入图片描述

Solaris秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SCC3中filter的运用

filter属性在设置img图片时，可以通过filter属性为图片设置滤镜，他有多个属性值，可以将一张图片设置成多种不同的形式属性值opacity(0 ~ 1 / %)：设置透明度，为1（100%）时，图片完全显示，为0（0%）时图片将完全透明blur(px)：设置模糊，为像素值，数值越大，则越模糊brightness(%)：设置高亮，数值为百分比，默认为1（100%）小于100%...
复制链接

扫一扫