Home

主题

filter 滤镜 ​

高斯模糊 ​

给图像设置高斯模糊。
“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；
如果没有设定值，则默认是0；
这个参数可设置css长度值，但不接受百分比值。
{ "filter": "blur(0px)" }
详细代码
vue
<script setup>
import { ref, computed } from 'vue'
import { ElSlider } from 'element-plus'

const blur = ref(0)

let filterStyle = computed(() => {
    return {
        filter: "blur(" + blur.value + "px)",
    }
})
</script>

<template>
    <div class="note">
        给图像设置高斯模糊。
        <br />
        “radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；
        <br />
        如果没有设定值，则默认是0；
        <br />
        这个参数可设置css长度值，但不接受百分比值。
    </div>

    <img src="/images/bg1.jpg" :style="filterStyle">

    <span>{{ filterStyle }}</span>

    <el-slider :min="0" :max="40" v-model="blur" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    padding: 15px 0;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

对比度 ​

调整图像的对比度。
值是0%的话，图像会全黑。值是100%，图像不变。
值可以超过100%，意味着会运用更低的对比。
若没有设置值，默认是1。
{ "filter": "contrast(100%)" }
详细代码
vue
<script setup>
import { ref, computed } from 'vue'
import { ElSlider } from 'element-plus'

const contrast = ref(100)
let filterStyle = computed(() => {
    return {
        filter: "contrast(" + contrast.value + "%)",
    }
})
</script>

<template>
    <div class="note">
        调整图像的对比度。
        <br />
        值是0%的话，图像会全黑。值是100%，图像不变。
        <br />
        值可以超过100%，意味着会运用更低的对比。
        <br />
        若没有设置值，默认是1。
    </div>

    <img src="/images/bg1.jpg" :style="filterStyle">

    <span>{{ filterStyle }}</span>

    <el-slider :min="0" :max="500" v-model="contrast" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

灰度 ​

将图像转换为灰度图像。
值定义转换的比例。
值为100%则完全转为灰度图像，值为0%图像无变化。
值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。 { "filter": "grayscale(0%)" }
详细代码
vue
<script setup>
import { ref, computed } from 'vue'
import { ElSlider } from 'element-plus'

const grayscale = ref(0)
let filterStyle = computed(() => {
    return {
        filter: "grayscale(" + grayscale.value + "%)",
    }
})
</script>

<template>
    <span class="note">
        将图像转换为灰度图像。
        <br />
        值定义转换的比例。
        <br />
        值为100%则完全转为灰度图像，值为0%图像无变化。
        <br />
        值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。
    </span>
    <img src="/images/bg1.jpg" :style="filterStyle">

    <span>{{ filterStyle }}</span>

    <el-slider :min="0" :max="100" v-model="grayscale" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

饱和度 ​

转换图像饱和度。值定义转换的比例。
值为0%则是完全不饱和，值为100%则图像无变化。
其他值，则是效果的线性乘子。
超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。 { "filter": "saturate(100%)" }
详细代码
vue
<script setup>
import { ref, computed } from 'vue'
import { ElSlider } from 'element-plus'

const saturate = ref(100)
let filterStyle = computed(() => {
    return {
        filter: "saturate(" + saturate.value + "%)",
    }
})
</script>

<template>
    <span class="note">
        转换图像饱和度。值定义转换的比例。
        <br />
        值为0%则是完全不饱和，值为100%则图像无变化。
        <br />
        其他值，则是效果的线性乘子。
        <br />
        超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
    </span>
    
    <img src="/images/bg1.jpg" :style="filterStyle">

    <span>{{ filterStyle }}</span>

    <el-slider :min="0" :max="200" v-model="saturate" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

透明度 ​

opacity(%)

转化图像的透明程度。值定义转换的比例。
值为0%则是完全透明，值为100%则图像无变化。
值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。
若值未设置，值默认是1。 { "filter": "opacity(100%)" }
详细代码
vue
<script setup>
import { ref, computed } from 'vue'
import { ElSlider } from 'element-plus'

const opacity = ref(100)
let filterStyle = computed(() => {
    return {
        filter: "opacity(" + opacity.value + "%)",
    }
})
</script>

<template>
    <h3>opacity(%)</h3>
    <span class="note">
        转化图像的透明程度。值定义转换的比例。
        <br />
        值为0%则是完全透明，值为100%则图像无变化。
        <br />
        值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。
        <br />
        若值未设置，值默认是1。
    </span>
    <img src="/images/bg1.jpg" :style="filterStyle">

    <span>{{ filterStyle }}</span>

    <el-slider :min="0" :max="100" v-model="opacity" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

色相旋转 ​

给图像应用色相旋转。
“angle”一值设定图像会被调整的色环角度值。
值为0deg，则图像无变化。
若值未设置，默认值是0deg。
该值虽然没有最大值，超过360deg的值相当于又绕一圈。 { "filter": "hue_rotate(0deg)" }
详细代码
vue
<script setup>
import { ref, computed } from 'vue'
import { ElSlider } from 'element-plus'

const hue_rotate = ref(0)
let filterStyle = computed(() => {
    return {
        filter: "hue_rotate(" + hue_rotate.value + "deg)",
    }
})
</script>

<template>
    <span class="note">
        给图像应用色相旋转。
        <br />
        “angle”一值设定图像会被调整的色环角度值。
        <br />
        值为0deg，则图像无变化。
        <br />
        若值未设置，默认值是0deg。
        <br />
        该值虽然没有最大值，超过360deg的值相当于又绕一圈。
    </span>

    <img src="/images/bg1.jpg" :style="filterStyle">

    <span>{{ filterStyle }}</span>

    <el-slider :min="0" :max="100" v-model="hue_rotate" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

深褐色 ​

将图像转换为深褐色。
值定义转换的比例。
值为100%则完全是深褐色的，值为0%图像无变化。
值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0 { "filter": "sepia(0%)" }
详细代码
vue
<script setup>
import { ref, computed } from 'vue'
import { ElSlider } from 'element-plus'

const sepia = ref(0)
let filterStyle = computed(() => {
    return {
        filter: "sepia(" + sepia.value + "%)",
    }
})
</script>

<template>
    <span class="note">
        将图像转换为深褐色。
        <br />
        值定义转换的比例。
        <br />
        值为100%则完全是深褐色的，值为0%图像无变化。
        <br />
        值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0
    </span>

    <img src="/images/bg1.jpg" :style="filterStyle">

    <span>{{ filterStyle }}</span>

    <el-slider :min="0" :max="100" v-model="sepia" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

线性乘法 ​

给图片应用一种线性乘法，使其看起来更亮或更暗。
如果值是0%，图像会全黑。值是100%，则图像无变化。
其他的值对应线性乘数效果。
值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 { "filter": "brightness(100%)" }
详细代码
vue
<script setup>
import { ref,computed } from 'vue'
import { ElSlider } from 'element-plus'

const brightness = ref(100)
let filterStyle = computed(() => {
    return {
        filter: "brightness(" + brightness.value + "%)",
    }
})
</script>

<template>
    <span class="note">
        给图片应用一种线性乘法，使其看起来更亮或更暗。
        <br />
        如果值是0%，图像会全黑。值是100%，则图像无变化。
        <br />
        其他的值对应线性乘数效果。
        <br />
        值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
    </span>

    <img src="/images/bg1.jpg" :style="filterStyle">

    <span>{{ filterStyle }}</span>

    <el-slider :min="0" :max="400" v-model="brightness" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

反转图像 ​

反转输入图像。值定义转换的比例。
100%的价值是完全反转。值为0%则图像无变化。
值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。 { "filter": "invert(0%)" }
详细代码
vue
<script setup>
import { ref, computed } from 'vue'
import { ElSlider } from 'element-plus'

const invert = ref(0)
let filterStyle = computed(() => {
    return {
        filter: "invert(" + invert.value + "%)",
    }
})
</script>

<template>
    <span class="note"> 反转输入图像。值定义转换的比例。
        <br />
        100%的价值是完全反转。值为0%则图像无变化。
        <br />
        值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
    </span>
    <img src="/images/bg1.jpg" :style="filterStyle">

    <span>{{ filterStyle }}</span>

    <el-slider :min="0" :max="100" v-model="invert" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

阴影 ​

给图像设置一个阴影效果。
效果见 不规则图形投影
详细代码
vue
<script setup>
import { ElSlider } from 'element-plus'

</script>

<template>
    <span class="note">
        给图像设置一个阴影效果。
        <br />
        效果见
        <a href="/css_tricks/shadow/#不规则图形投影">不规则图形投影</a>
    </span>
    <img src="/images/bg1.jpg">

    <el-slider :min="0" :max="100" show-input />
</template>

<style scoped lang="scss">
.note {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 15px;
}

img {
    height: 250px;
    margin: 10px auto;
}
</style>

Released under the MIT License.

Copyright © 2018-present raopan 饶盼 base on VitePress 2.0.0-alpha.17