Style filter ਪ੍ਰਤੀਯੋਗਿਤਾ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

filter ਚਿੰਨ੍ਹ ਨੂੰ ਵਿਸ਼ੇਸ਼ ਪ੍ਰਭਾਵ (ਜਿਵੇਂ ਬਿਊਰ ਅਤੇ ਸੈਟੇਸ਼ਨ) ਜੋੜੋ。

ਹੋਰ ਦੇਖੋ:

CSS ਸੰਦਰਭ ਪੁਸਤਕ:filter ਪ੍ਰਤੀਯੋਗਿਤਾ

ਉਦਾਹਰਣ

ਚਿੰਨ੍ਹ ਦੇ ਰੰਗ ਨੂੰ ਸਿਵਰੀ ਲਾਗੂ ਕਰੋ (100% ਗ੍ਰੇਸਕੇਲ):

document.getElementById("myImg").style.filter = "grayscale(100%)";

ਸਵੈ ਦੀ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਿਧਾਂਤ

filter ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਲੈਣਾ:

object.style.filter

filter ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈਟ ਕਰੋ:

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

ਫਿਲਟਰ ਫੰਕਸ਼ਨ

ਟਿੱਪਣੀਆਂ:filter ਵਿੱਚ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ (ਜਿਵੇਂ 75%) ਵੀ ਦਸੈਮਲ ਮੁੱਲਾਂ (ਜਿਵੇਂ 0.75) ਮੰਗਿਆ ਜਾਂਦਾ ਹੈ。

ਫਿਲਟਰ ਵਰਣਨ
none ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਦਿਖਾਉਣਾ ਹੈ。
blur(px)

ਚਿੰਨ੍ਹ ਬਿਊਰ ਪ੍ਰਭਾਵ ਲਾਗੂ ਕਰੋ। ਵੱਡੀ ਮੁੱਲ ਹੋਣ ਨਾਲ ਜ਼ਿਆਦਾ ਬਿਊਰ ਪ੍ਰਭਾਵ ਪੈਦਾ ਹੁੰਦਾ ਹੈ。

如果未规定值，则使用 0。
brightness(%)

调整图像的亮度。

0% 将使图像完全变黑。

100% (1) 是默认值，表示原始图像。

超过 100% 的值将提供更亮的结果。
contrast(%)

调整图像的对比度。

0% 将使图像完全变黑。

100% (1) 是默认值，表示原始图像。

超过 100% 的值将提供对比度较低的结果。
drop-shadow(h-shadow v-shadow blur spread color)

对图像应用投影效果。

可能的值：

h-shadow - 必需。规定水平阴影的像素值。负值将阴影放置在图像的左侧。

v-shadow - 必需。规定垂直阴影的像素值。负值将阴影置于图像上方。

blur - 可选。第三个值，须以像素为单位。为阴影添加模糊效果。较大的值会产生更多的模糊（阴影变得更大更亮）。不允许使用负值。如果未规定值，则使用 0（阴影的边缘是锐利的）。

spread - 可选。第四个值，须以像素为单位。正值会导致阴影扩大并变大，负值会导致阴影缩小。如果未规定，它将为 0（阴影将与元素大小相同）。

ਟਿੱਪਣੀਆਂ:Chrome、Safari 和 Opera，可能还有其他浏览器，不支持第 4 种长度；如果添加，它将不会呈现。

colorਵਾਲੀਆਂ ਚੋਣਾਂ: ਚੋਣਵੇਂ ਰੰਗ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ। ਅਗਰ ਨਿਰਧਾਰਿਤ ਨਹੀਂ ਹੋਵੇ, ਰੰਗ ਬਰਾਉਨ ਹੋਵੇਗਾ (ਆਮ ਤੌਰ 'ਤੇ ਕਾਲਾ ਹੁੰਦਾ ਹੈ)。

ਸੁਝਾਅ:ਇਹ filter box-shadow ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਮਿਲਦਾ ਹੈ。
grayscale(%)

ਚਿੱਤਰ ਨੂੰ ਸਿਵਰੇ ਕਰਾਓ。

0% (0) ਮੂਲਮਤਾ ਹੈ ਅਤੇ ਮੂਲ ਚਿੱਤਰ ਦਰਸਾਉਂਦਾ ਹੈ。

100% ਚਿੱਤਰ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਿਵਰੇ ਕਰੇਗਾ (ਕੱਚੇ ਚਿੱਤਰ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ)。

ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਮਨਜ਼ੂਰ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
hue-rotate(deg)

ਚਿੱਤਰ 'ਤੇ ਰੰਗ ਰੰਗ ਵਿਚਕਾਰ ਘੁੰਮਾਓ। ਇਹ ਮੁੱਲ ਚਿੱਤਰ ਦੇ ਨਮੂਨੇ ਨੂੰ ਸੰਵਾਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ:

0deg ਮੂਲਮਤਾ ਹੈ ਅਤੇ ਮੂਲ ਚਿੱਤਰ ਦਰਸਾਉਂਦਾ ਹੈ。

ਟਿੱਪਣੀਆਂ:ਸਭ ਤੋਂ ਵੱਧ 360 ਅਨਗਰੇਜ਼ੀ ਦਰਜੇ ਹਨ。
invert(%)

ਚਿੱਤਰ ਵਿੱਚ ਨਮੂਨੇ ਨੂੰ ਉਲਟ ਕਰੋ。

0% (0) ਮੂਲਮਤਾ ਹੈ ਅਤੇ ਮੂਲ ਚਿੱਤਰ ਦਰਸਾਉਂਦਾ ਹੈ。

100% ਚਿੱਤਰ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਉਲਟ ਕਰੇਗਾ。

ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਮਨਜ਼ੂਰ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
opacity(%)

ਚਿੱਤਰ ਦੀ ਪਾਰਦਰਸ਼ਤਾ ਸੰਵਾਦ ਸੈੱਟ ਕਰੋ। ਪਾਰਦਰਸ਼ਤਾ ਸੰਵਾਦ ਪਾਰਦਰਸ਼ਤਾ ਸੰਵਾਦ ਦੇ ਪੱਧਰ ਨੂੰ ਵਰਣਨ ਕਰਦੇ ਹਨ ਜਿਸ ਵਿੱਚ:

0% ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਾਰਦਰਸ਼ੀ ਹੈ。

100% (1) ਮੂਲਮਤਾ ਹੈ ਅਤੇ ਮੂਲ ਚਿੱਤਰ ਦਰਸਾਉਂਦਾ ਹੈ (ਬਿਨਾ ਪਾਰਦਰਸ਼ਤਾ ਵਾਲੇ)。

ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਮਨਜ਼ੂਰ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਸੁਝਾਅ:ਇਹ filter opacity ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਮਿਲਦਾ ਹੈ。
saturate(%)

ਚਿੱਤਰ ਦੀ ਸੰਵਾਦ ਸਿਫਾਰਸ਼ ਕਰੋ。

0% (0) ਚਿੱਤਰ ਨੂੰ ਬਿਨਾ ਸੰਵਾਦ ਬਣਾਵੇਗਾ。

100% ਮੂਲਮਤਾ ਹੈ ਅਤੇ ਮੂਲ ਚਿੱਤਰ ਦਰਸਾਉਂਦਾ ਹੈ。

100% ਤੋਂ ਵੱਧ ਦੇ ਮੁੱਲ ਵਧੇਰੇ ਸੰਵਾਦ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ。

ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਮਨਜ਼ੂਰ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
sepia(%)

ਚਿੱਤਰ ਨੂੰ ਮੰਗਨ ਹਰੇ ਬਣਾਓ。

0% (0) ਮੂਲਮਤਾ ਹੈ ਅਤੇ ਮੂਲ ਚਿੱਤਰ ਦਰਸਾਉਂਦਾ ਹੈ。

100% ਮੰਗਨ ਹਰੇ ਬਣਾਵੇਗਾ。

ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਮਨਜ਼ੂਰ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਤਕਨੀਕੀ ਵੇਰਵੇ

CSS ਦੀ ਵਰਜਨ: CSS3

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਸਾਰੇ ਅੰਕ ਇਸ ਸਾਈਟ ਦੇ ਪਹਿਲੇ ਇਸ ਪ੍ਰਤੀਭਾਵ ਦੀ ਸਹੀ ਸਰਵੇਖਣ ਪ੍ਰਕਿਰਿਆ ਦੀ ਆਗੂ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਦਾ ਸਂਕੇਤ ਕਰਦੇ ਹਨ。

ਚਰਾਮਸ ਐਜ਼ਡ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਾਮਸ ਐਜ਼ਡ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
53.0 13.0 35.0 9.1 40.0