요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개-CSS 튜토리얼-php.cn

이 글에서는 요소의 시각적 효과를 정의하는 CSS의 필터 속성에 대해 소개합니다. 이 속성에는 특정 참조 값이 있으므로 도움이 될 수 있기를 바랍니다.

blur

이미지에 가우시안 블러를 설정하세요. "반지름" 값은 가우스 함수의 표준 편차, 즉 화면에서 얼마나 많은 픽셀이 함께 혼합되는지를 설정하므로 값이 클수록 흐릿해집니다.
설정된 값이 없는 경우 기본값은 0입니다. 이 매개변수는 CSS 길이 값을 설정할 수 있지만 백분율 값은 허용되지 않습니다.

요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개

brightness

그림에 선형 곱셈을 적용하여 더 밝거나 어둡게 보이도록 합니다. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값이 100%이면 이미지에 변화가 없습니다. 다른 값은 선형 승수 효과에 해당합니다. 100% 이상의 값이면 괜찮고 이미지가 이전보다 밝아집니다. 값이 설정되지 않은 경우 기본값은 1입니다.

요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개

contrast

이미지의 대비를 조정하세요. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값은 100%이고 이미지는 변경되지 않습니다. 값은 100%를 초과할 수 있으며, 이는 더 낮은 비교가 사용된다는 의미입니다. 값이 설정되지 않은 경우 기본값은 1입니다.

요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개

graycale

이미지를 회색조 이미지로 변환합니다. 값은 변환 규모를 정의합니다. 값이 100%이면 이미지가 완전히 흑백으로 변환되고, 값이 0%이면 이미지가 변하지 않습니다. 0%에서 100% 사이의 값은 효과의 선형 승수입니다. 설정하지 않으면 기본값은 0입니다.

요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개

hue-rotate

이미지에 색조 회전을 적용합니다. "angle" 값은 이미지가 조정되는 색상환의 각도를 설정합니다. 값이 0deg이면 이미지에 변화가 없습니다. 값을 설정하지 않은 경우 기본값은 0deg입니다. 이 값에는 최대값이 없지만 360deg를 초과하는 값은 다시 도는 것과 같습니다.

요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개

invert

입력 이미지를 반전합니다. 값은 변환 규모를 정의합니다. 값의 100%는 완전한 반전입니다. 0% 값은 이미지에 변화가 없음을 의미합니다. 0%에서 100% 사이의 값은 효과의 선형 승수입니다. 값이 설정되지 않은 경우 기본값은 0입니다.

요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개

opacity

이미지의 투명도를 변환합니다. 값은 변환 규모를 정의합니다. 0% 값은 완전한 투명도를 의미하고, 100% 값은 이미지에 변화가 없음을 의미합니다. 0%에서 100% 사이의 값은 효과의 선형 승수이며 이미지 샘플 수를 곱하는 것과 같습니다. 값이 설정되지 않은 경우 기본값은 1입니다. 이 기능은 필터를 통해 일부 브라우저가 성능 향상을 위해 하드웨어 가속을 제공한다는 점을 제외하면 기존 불투명 속성과 매우 유사합니다.

요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개

saturate

이미지 채도를 변환합니다. 값은 변환 규모를 정의합니다. 0% 값은 이미지의 채도가 완전히 감소되었음을 의미하고, 100% 값은 이미지에 변화가 없음을 의미합니다. 다른 값은 효과의 선형 승수입니다. 채도가 높을수록 100% 이상의 값이 허용됩니다. 값이 설정되지 않은 경우 기본값은 1입니다.

요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개

sepia

이미지를 세피아로 변환합니다. 값은 변환 규모를 정의합니다. 100% 값은 완전한 세피아이고, 0% 값은 이미지를 변경하지 않습니다. 0%에서 100% 사이의 값은 효과의 선형 승수입니다. 설정하지 않으면 기본값은 0입니다.

이미지에 그림자 효과를 설정하세요. 그림자는 이미지 아래에 합성되며 흐려질 수 있으며 특정 색상으로 칠할 수 있는 매트의 오프셋 버전입니다. 이 함수는 "inset" 키워드가 허용되지 않는다는 점을 제외하고 유형(CSS3 컨텍스트에 정의됨)의 값을 허용합니다. 이 기능은 기존 box-shadow box-shadow 속성과 매우 유사합니다. 차이점은 필터를 통해 일부 브라우저는 더 나은 성능을 위해 하드웨어 가속을 제공한다는 것입니다.

요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>Document</title>

<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>


    <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>

로그인 후 복사

위 내용은 요소의 시각적 효과를 정의하는 CSS의 필터 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!