The CSS filter property applies graphical effects such as blurs and color shifts to an element, and is commonly used to adjust the rendering of images, backgrounds, and borders.
Supported functions
|
Function |
Meaning |
Default value |
Value range |
|
grayscale() |
Converts the image to grayscale. A value of 100% makes the image completely grayscale. |
0 |
0% to 100% |
|
opacity() |
Sets the transparency of the image. |
1 |
0% to 100% |
|
invert() |
Inverts the image. A value of 100% completely inverts the image. |
0 |
0% to 100% |
|
sepia() |
Converts the image to sepia. A value of 100% makes the image completely sepia. |
0 |
0% to 100% |
|
saturate() |
Adjusts the saturation of the image. A value of 0% fully desaturates the image. A value of 100% leaves the image unchanged. Values over 100% increase saturation. |
1 |
0% to +∞ |
|
contrast() |
Adjusts the contrast of the image. A value of 0% renders the image completely black. A value of 100% leaves the image unchanged. Values over 100% lower the image contrast. |
1 |
0% to +∞ |
|
brightness() |
Adjusts the brightness of the image by applying a linear multiplier. A value of 0% produces a completely black image. A value of 100% leaves the image unchanged. Values greater than 100% increase brightness. |
1 |
0% to +∞ |
Unsupported functions
Compound functions and the blur, drop-shadow, hue-rotate, and url functions 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>
Download detailImageFilter.zip for the complete sample code.