CSS中filter属性定义了元素的可视效果是什么

发布时间:2020-07-14 09:14:23 作者:Leah
来源:亿速云 阅读:167

今天就跟大家聊聊有关CSS中filter属性定义了元素的可视效果是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

blur

CSS中filter属性定义了元素的可视效果是什么

brightness

CSS中filter属性定义了元素的可视效果是什么

contrast

CSS中filter属性定义了元素的可视效果是什么

graycale

CSS中filter属性定义了元素的可视效果是什么

hue-rotate

CSS中filter属性定义了元素的可视效果是什么

invert

CSS中filter属性定义了元素的可视效果是什么

opacity

CSS中filter属性定义了元素的可视效果是什么

saturate

CSS中filter属性定义了元素的可视效果是什么

sepia

CSS中filter属性定义了元素的可视效果是什么

drop-shadow

CSS中filter属性定义了元素的可视效果是什么

<!DOCTYPE html>
<html>

<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>
</head>
<style>
    body {
        background-color: #000;
        color: skyblue;
    }
    div {
        border: 1px solid #fff;
        padding: 10px;
        width: 610px;
        margin: 10px;
    }
    .blur1 {
        filter: blur(0.4px);
    }

    .blur2 {
        filter: blur(1px);
    }

    .blur3 {
        filter: blur(4px);
    }

    .brightness1 {
        filter: brightness(0.30);
    }

    .brightness2 {
        filter: brightness(0.8);
    }

    .brightness3 {
        filter: brightness(1);
    }

    .contrast1 {
        filter: contrast(10%);
    }

    .contrast2 {
        filter: contrast(50%);
    }

    .contrast3 {
        filter: contrast(100%);
    }

    .grayscale1 {
        filter: grayscale(10%);
    }

    .grayscale2 {
        filter: grayscale(50%);
    }

    .grayscale3 {
        filter: grayscale(100%);
    }

    .huerotate1 {
        filter: hue-rotate(0deg);
    }

    .huerotate2 {
        filter: hue-rotate(90deg);
    }

    .huerotate3 {
        filter: hue-rotate(180deg);
    }

    .invert1 {
        filter: invert(20%);
    }

    .invert2 {
        filter: invert(60%);
    }

    .invert3 {
        filter: invert(100%);
    }

    .opacity1 {
        filter: opacity(10%);
    }

    .opacity2 {
        filter: opacity(80%);
    }

    .opacity3 {
        filter: opacity(100%);
    }

    .saturate1 {
        filter: saturate(0.2);
    }

    .saturate2 {
        filter: saturate(0.6);
    }

    .saturate3 {
        filter: saturate(1);
    }

    .sepia1 {
        filter: sepia(10%);
    }

    .sepia2 {
        filter: sepia(60%);
    }

    .sepia3 {
        filter: sepia(100%);
    }

    .shadow1 {
        filter: drop-shadow(2px 2px 2px red);
    }

    .shadow2 {
        filter: drop-shadow(8px 8px 1px purple);
    }

    .shadow3 {
        filter: drop-shadow(1px 1px 10px hotpink);
    }
</style>

<body>
    <div>
        <p>给图像绘制高斯模糊,值越大越模糊</p>
        <ul>
            <li>blur</li>
            <li>blur</li>
            <li>blur</li>
        </ul>
    </div>
    <div>
        <p>给图像一种线性乘法使看起来更亮或者更暗。值为0图像全黑;值超过100%图像更亮</p>
        <ul>
            <li>brightness</li>
            <li>brightness</li>
            <li>brightness</li>
        </ul>
    </div>
    <div>
        <p>调整图像对比度。值为0,图像全黑;值超过100%会运用更低的对比</p>
        <ul>
            <li>contrast</li>
            <li>contrast</li>
            <li>contrast</li>
        </ul>
    </div>
    <!-- <div>
        <p>blur</p>
        <ul>
            <li>blur</li>
            <li>blur</li>
            <li>blur</li>
        </ul>
    </div> -->
    <div>
        <p>图像转换为灰度图像,值为0图像无变化;值为100%完全转换为灰度图像</p>
        <ul>
            <li>grayscale</li>
            <li>grayscale</li>
            <li>grayscale</li>
        </ul>
    </div>
    <div>
        <p>给图像用色相旋转。值为0deg图像无变化;没有最大值,超过360deg相当于又绕一圈</p>
        <ul>
            <li>huerotate</li>
            <li>huerotate</li>
            <li>huerotate</li>
        </ul>
    </div>
    <div>
        <p>反转输入图像。0%图像无变化,100%图像完全反转</p>
        <ul>
            <li>invert</li>
            <li>invert</li>
            <li>invert</li>
        </ul>
    </div>
    <div>
        <p>转化图像的透明度。0%,完全透明;100%图像无变化</p>
        <ul>
            <li>opacity</li>
            <li>opacity</li>
            <li>opacity</li>
        </ul>
    </div>
    <div>
        <p>转换图像饱和度。0%完全不饱和;100%,完全饱和</p>
        <ul>
            <li>saturate</li>
            <li>saturate</li>
            <li>saturate</li>
        </ul>
    </div>
    <div>
        <p>图像转换为深褐色。值为100%为深褐色;值为0%图像无变化</p>
        <ul>
            <li>sepia</li>
            <li>sepia</li>
            <li>sepia</li>
        </ul>
    </div>
    <div>
        <p>图像设置阴影效果</p>
        <ul>
            <li>shadow</li>
            <li>shadow</li>
            <li>shadow</li>
        </ul>
    </div>
</body>

</html>

看完上述内容,你们对CSS中filter属性定义了元素的可视效果是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. CSS3中filter属性有哪些
  2. CSS中的filter属性怎么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3 filter属性 可视效果

上一篇:怎么实现制作动态视觉差背景

下一篇:加减乘除法运算(函数数组指针法)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》