Question

我目前正在使用CSS过滤器，但无法理解为什么我的过滤器中只有四分之一正在运行。

我目前在div中有4张图片，2张在顶部，2张在底部。每个图像都浮动右边有边框和填充;我已将其创建为#id。然后，我将4个CSS滤镜应用于图像作为类，但只有灰度正在工作。

我无法理解为什么只有灰度是有效的，因为所有id都是唯一的（并且它们在图像浮动时工作）并且其中一个类（灰度）已经完美地工作。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">

            div {
                vertical-align: top;
                display: inline-block;
                width: 500px;
                border: 2px solid #000;
                padding: 10px;
                margin: 0 auto 0 auto;

            }

            #img1 {
                float: right;
                border: 2px solid black;
                margin: 0 20px 20px 20px;

            }

            #img2 {
                float: right;
                border: 2px solid black;
                margin: 0 20px 20px 20px;

            }

            #img3 {
                float: right;
                border: 2px solid black;
                margin: 0 20px 20px 20px;

            }

            #img4 {
                float: right;
                border: 2px solid black;
                margin: 0 20px 20px 20px;

            }

            .sepia {
                -webkit-filter: sepia(5000);
            }

            /* this class works*/
            .grayscale {
                -webkit-filter: grayscale(1);
            }

            .blur {
                -webkit-filter: blur(1000px);
            }

            .contrast {
                -webkit-filter: contrast(1);
            }

        </style>
    </head>

    <body>
        <div>
            <h2>Sepia</h2>
            <img id="img1" class="sepia" src="images/owl.jpg" alt="This is an owl" width="250" height="250">
        </div>

        <div>
        <!-- this works perfectly-->
            <h2>Grayscale</h2>
            <img id="img2" class="grayscale" src="images/owl.jpg" alt="This is an owl" width="250" height="250">
        </div>

        <div>
            <h2>Blur</h2>
            <img id="img3" class="blur" src="images/owl.jpg" alt="This is an owl" width="250" height="250">
        </div>

        <div>
            <h2>Contrast</h2>
            <img id="img4" class="contrast" src="images/owl.jpg" alt="This is an owl" width="250" height="250">
        </div>

        </body>
</html>

Answer 1

我已经解决了这个问题;我使用了错误的值，因为我认为所有过滤器值都在0到1之间。

blur使用px：

filter: blur(5px);

对比可以使用％：

filter: contrast(200%);

CSS过滤器不起作用（除了一个）

1 个答案: