CSS properties apply graphic effects such as blur or color shift to elements. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
Supported functions
Functions | Description | Default value | Limit |
grayscale() | The grayscale of the image. A value of 100% indicates a full conversion to grayscale. | 0 | 0%~100% |
opacity() | The degree of transparency of the image. | 1 | 0%~100% |
invert() | Inverts the image. A value of 100% indicates full inversion. | 0 | 0%~100% |
sepia() | Converts the image to dark brown. A value of 100% indicates a completely dark brown color. | 0 | 0%~100% |
saturate() | The saturation of the image. A value of 0% indicates complete desaturation; a value of 100% indicates no change in the image; other values are linear multipliers of the effect; more than 100% indicates higher saturation. | 1 | 0% ~ + ∞ |
contrast() | The contrast of the image. A value of 0% means that the image will be completely black; a value of 100% means that the image will not change. The value can exceed 100%, meaning that a lower contrast will be applied. | 1 | 0% ~ + ∞ |
brightness() | Apply a linear multiplier to the image to make it look more or less bright. A value of 0% creates a completely black image; a value of 100% leaves the input unchanged; other values are linear multipliers of the effect; and values greater than 100% provide brighter results. | 1 | 0% ~ + ∞ |
Unsupported functions
Compound functions are not supported. Blur, drop-shadow, hue-rotate, and url are not supported.
Example
<template>
<div class="root">
<text>normal</text>
<image
class="image-normal"
src="https://pic49.photophoto.cn/20181202/0021033888940147_b.jpg"
></image>
<text>grayscale:100%</text>
<image
class="image-gray"
style="bg"
src="https://pic49.photophoto.cn/20181202/0021033888940147_b.jpg"
></image>
</div>
</template>
<script>
export default {
data: {},
methods: {},
};
</script>
<style>
.root {
display: flex;
align-items: center;
justify-content: center;
}
.image-normal {
flex-direction: column;
flex-shrink: 0;
align-content: auto;
width: 350rpx;
height: 350rpx;
}
.image-gray {
flex-direction: column;
flex-shrink: 0;
align-content: auto;
width: 350rpx;
height: 350rpx;
filter: grayscale(100%);
}
</style>
Click here detailImageFilter.zip for the complete example code.