CSS فیلتر کی کیماست
- ਪਿਛਲਾ ਪੰਨਾ empty-cells
- ਅਗਲਾ ਪੰਨਾ flex
CSS 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
ਸੁਝਾਅ:如需使用多个滤镜,请用空格分隔每个滤镜(参见页面下方的更多实例)。
技术细节
默认值: | none |
---|---|
继承: | 否 |
动画制作: | 支持。请参阅:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇ。 |
ਸੰਸਕਰਣ: | CSS3 |
JavaScript ਗਰੇਫਟ: | object.style.filter="grayscale(100%)" |
ਫਿਲਟਰ ਫੰਕਸ਼ਨ
ਟਿੱਪਣੀਆਂ:ਫਿਲਟਰ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਕੀਮਤ (ਉਦਾਹਰਣ ਵਜੋਂ 75%) ਦਾ ਫਿਲਟਰ ਵਰਤੋਂ ਕਰੋ, ਇਹ ਦਾ ਦਸਮੀ ਰੂਪ (ਉਦਾਹਰਣ ਵਜੋਂ 0.75) ਵੀ ਸਵੀਕਾਰ ਕੀਤਾ ਜਾਵੇਗਾ。
ਫਿਲਟਰ | ਵਰਣਨ |
---|---|
none | ਮੂਲ ਰੰਗ ਦਾ ਰੰਗ ਹੈ, 100% ਪ੍ਰਤੀਸ਼ਤ ਹੈ ਦੇਸ਼ ਚਿੱਤਰ ਦਾ ਪ੍ਰਤੀਕਰਮ ਹੈ。 |
blur(px) |
ਚਿੱਤਰ ਨੂੰ ਧੁੰਧ ਦਾ ਪ੍ਰਭਾਵ ਦਿਓ।ਵੱਡੀ ਕੀਮਤ ਵੱਡੀ ਧੁੰਧ ਪ੍ਰਦਾਨ ਕਰੇਗੀ。 ਜੇਕਰ ਕੋਈ ਕੀਮਤ ਨਾ ਦਿੱਤੀ ਗਈ ਤਾਂ 0 ਦਾ ਉਪਯੋਗ ਕੀਤਾ ਜਾਵੇਗਾ。 |
brightness(%) |
ਚਿੱਤਰ ਦੀ ਚਮਕ ਸੰਤੁਲਨ ਕਰੋ。
|
contrast(%) |
ਚਿੱਤਰ ਦੀ ਕੰਟਰਾਸਟ ਸੰਤੁਲਨ ਕਰੋ。
|
drop-shadow(h-shadow v-shadow blur spread color) |
ਚਿੱਤਰ ਨੂੰ ਛਾਲ ਦਾ ਪ੍ਰਭਾਵ ਦਿਓ。 ਸੰਭਵ ਕੀਮਤਾਂ:
blur - ਵਿਕਲਪੀ।ਇਹ ਤੀਜੀ ਕੀਮਤ ਹੈ, ਇਕਾਈ ਪਿਕਸਲ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।ਛਾਲ ਨੂੰ ਧੁੰਧ ਦਾ ਪ੍ਰਭਾਵ ਜੋੜੋ।ਕੀਮਤ ਵਧਣ ਨਾਲ ਧੁੰਧ ਵਧਾਉਣਾ ਹੋਵੇਗਾ (ਛਾਲ ਵੱਡਾ ਅਤੇ ਚਮਕਦਾ ਹੋਵੇਗਾ)।ਨੈਗੈਟਿਵ ਕੀਮਤ ਪ੍ਰਤੀ ਪ੍ਰਤੀਬੰਧਿਤ ਹਨ।ਜੇਕਰ ਕੋਈ ਕੀਮਤ ਨਾ ਦਿੱਤੀ ਗਈ ਤਾਂ 0 ਦਾ ਉਪਯੋਗ ਕੀਤਾ ਜਾਵੇਗਾ (ਛਾਲ ਦੀ ਹੱਡੀ ਗੂੜ੍ਹੀ ਹੋਵੇਗੀ)。 spread - ਵਿਕਲਪੀ।ਇਹ ਚੌਥੀ ਕੀਮਤ ਹੈ, ਇਕਾਈ ਪਿਕਸਲ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।ਪਜ਼ਿਟਿਵ ਕੀਮਤ ਛਾਲ ਨੂੰ ਵਧਾ ਕੇ ਵਧਾ ਦੇਵੇਗਾ, ਨੈਗੈਟਿਵ ਕੀਮਤ ਛਾਲ ਨੂੰ ਘਟਾ ਕੇ ਘਟਾ ਦੇਵੇਗਾ।ਜੇਕਰ ਕੋਈ ਕੀਮਤ ਨਾ ਦਿੱਤੀ ਗਈ ਤਾਂ 0 ਦਾ ਉਪਯੋਗ ਕੀਤਾ ਜਾਵੇਗਾ (ਛਾਲ ਐਲੀਮੈਂਟ ਦੇ ਆਕਾਰ ਨਾਲ ਬਰਾਬਰ ਹੋਵੇਗਾ)。 ਟਿੱਪਣੀਆਂ:ਕਰੋਮ, ਸਫਾਰੀ ਅਤੇ ਓਪਰਾ, ਮੰਗਣਾ ਹੈ ਕਿ ਹੋਰ ਬਰਾਉਜ਼ਰ ਵੀ ਚੌਥੀ ਲੰਬਾਈ ਨਹੀਂ ਸਮਰਥਤ ਕਰਦੇ; ਜੇਕਰ ਇਸ ਨੂੰ ਜੋੜਿਆ ਗਿਆ ਤਾਂ ਇਹ ਦਿਸ਼ਾ ਨਹੀਂ ਦਿਖਾਈ ਦੇਵੇਗਾ。 color - ਵਿਕਲਪੀ।ਛਾਲ ਨੂੰ ਰੰਗ ਜੋੜੋ।ਜੇਕਰ ਕੋਈ ਰੰਗ ਨਾ ਦਿੱਤਾ ਗਿਆ ਤਾਂ ਰੰਗ ਬਰਾਉਜ਼ਰ ਦੀ ਇੱਛਾ ਨਾਲ ਹੋਵੇਗਾ (ਆਮ ਤੌਰ 'ਤੇ ਕਾਲਾ ਰੰਗ ਹੁੰਦਾ ਹੈ)。 ਇਹ ਉਦਾਹਰਣ ਲਾਲ ਰੰਗ ਦਾ ਛਾਲ ਬਣਾਉਂਦਾ ਹੈ, ਹੌਰਿਜ਼ੰਟਲ ਅਤੇ ਵਰਤੀਕੁੰਜੀ ਦਿਸ਼ਾ ਵਿੱਚ 8px, 10px ਧੁੰਧ ਦਾ ਪ੍ਰਭਾਵ ਹੈ: filter: drop-shadow(8px 8px 10px red); ਸੁਝਾਅ:ਇਹ ਫਿਲਟਰ box-shadow ਗੁਣ ਨਾਲ ਸਮਾਨ ਹੈ。 |
grayscale(%) |
ਚਿੱਤਰ ਨੂੰ ਗ੍ਰੇਸਕੇਲ ਬਣਾਓ。
ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨਹੀਂ ਮਨਜ਼ੂਰ ਹਨ। |
hue-rotate(deg) |
ਚਿੱਤਰ 'ਤੇ ਰੰਗ ਪੁਰਜਾ ਘੁੰਮਾਓ ਲਾਗੂ ਕਰੋ। ਇਹ ਮੁੱਲ ਰੰਗ ਚੱਕਰ ਦੇ ਡਿਗਰੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਮੂਲ ਮੁੱਲ 0deg ਹੈ ਜਿਸ ਵਿੱਚ ਮੂਲ ਚਿੱਤਰ ਹੈ। ਟਿੱਪਣੀਆਂ:ਮਹੱਤਵਪੂਰਨ ਮੁੱਲ 360deg ਹੈ。 |
invert(%) |
ਚਿੱਤਰ ਵਿੱਚ ਨਮੂਨੇ ਨੂੰ ਉਲਟ ਕਰੋ。
ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨਹੀਂ ਮਨਜ਼ੂਰ ਹਨ। |
opacity(%) |
ਚਿੱਤਰ ਦੀ ਅਨੂਪਤੀ ਪੱਧਰ ਸੈਟ ਕਰੋ। opacity-level ਪਾਰਦਰਸ਼ਤਾ ਪੱਧਰ ਵਰਣਨ ਕਰਦਾ ਹੈ ਜਿਸ ਵਿੱਚ:
ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨਹੀਂ ਮਨਜ਼ੂਰ ਹਨ। ਸੁਝਾਅ:ਇਹ ਫਿਲਟਰ opacity ਗੁਣ ਨਾਲ ਸਮਾਨ ਹੈ。 |
saturate(%) |
ਚਿੱਤਰ ਦੀ ਸੰਪੂਰਨਤਾ ਸੈਟ ਕਰੋ。
ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨਹੀਂ ਮਨਜ਼ੂਰ ਹਨ। |
sepia(%) |
ਚਿੱਤਰ ਨੂੰ ਬੇਜਲਾ ਬਣਾਓ。
ਟਿੱਪਣੀਆਂ:ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨਹੀਂ ਮਨਜ਼ੂਰ ਹਨ। |
url(); |
url() ਫੰਕਸ਼ਨ ਸੰਗਠਿਤ ਐਸਵੀਜੀ ਫਿਲਟਰ ਦੇ ਐਕਸਐੱਮਐੱਲ ਫਾਇਲ ਦਾ ਸਥਾਨ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਸਪੈਸਿਫਿਕ ਫਿਲਟਰ ਐਲੀਮੈਂਟ ਦੇ ਹਾਂਕ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਣ: filter: url(svg-url#element-id); |
initial | ਇਸ ਗੁਣ ਨੂੰ ਮੂਲ ਮੁੱਲ ਤੇ ਸੈਟ ਕਰੋ। ਦੇਖੋ initial。 |
inherit | ਆਪਣੇ ਮਾਤਾ ਉਪਾਂਗ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰੋ। ਦੇਖੋ inherit。 |
ਹੋਰ ਉਦਾਹਰਣ
ਬਲਰ ਉਦਾਹਰਣ
ਚਿੱਤਰ ਨੂੰ ਬਲਰ ਪ੍ਰਭਾਵ ਲਾਗੂ ਕਰੋ:
img { filter: blur(5px); }
ਬਲਰ ਉਦਾਹਰਣ 2
ਬਲਰ ਪਿੱਨ ਚਿੱਤਰ ਲਾਗੂ ਕਰੋ:
img.background { filter: blur(35px); }
ਰੌਸ਼ਨੀ ਉਦਾਹਰਣ
ਚਿੱਤਰ ਦੀ ਰੌਸ਼ਨੀ ਸੰਸ਼ੋਧਨ ਕਰੋ:
img { filter: brightness(200%); }
ਕੰਟਰਾਸਟ ਉਦਾਹਰਣ
ਚਿੱਤਰ ਦੀ ਕੰਟਰਾਸਟ ਸੰਸ਼ੋਧਨ ਕਰੋ:
img { filter: contrast(200%); }
ਛਾਈ ਉਦਾਹਰਣ
ਚਿੱਤਰ ਨੂੰ ਛਾਈ ਪ੍ਰਭਾਵ ਲਾਗੂ ਕਰੋ:
img { filter: drop-shadow(8px 8px 10px gray); }
ਗ੍ਰੇ ਸਕੇਲ ਦੇ ਉਦਾਹਰਣ
ਚਿੱਤਰ ਨੂੰ ਗ੍ਰੇ ਸਕੇਲ ਵਿੱਚ ਬਦਲੋ:
img { filter: grayscale(50%); }
ਰੰਗ ਤਰੰਗ ਘੁੰਮਾਓ ਦੇ ਉਦਾਹਰਣ
ਚਿੱਤਰ 'ਤੇ ਰੰਗ ਤਰੰਗ ਘੁੰਮਾਓ:
img { filter: hue-rotate(90deg); }
ਪਾਲਣ ਦੇ ਉਦਾਹਰਣ
ਚਿੱਤਰ ਵਿੱਚ ਨਮੂਨੇ ਪਾਲਣ ਕਰੋ:
img { filter: invert(100%); }
ਅਨੁਪ੍ਰਮਾਣਤਾ ਦੇ ਉਦਾਹਰਣ
ਚਿੱਤਰ ਦੀ ਅਨੁਪ੍ਰਮਾਣਤਾ ਸੰਤੁਲਿਤ ਕਰੋ:
img { filter: opacity(30%); }
ਸਾਤੂਰਤਾ ਦੇ ਉਦਾਹਰਣ
ਚਿੱਤਰ ਦੀ ਸਾਤੂਰਤਾ ਸੰਤੁਲਿਤ ਕਰੋ:
img { filter: saturate(800%); }
ਕਾਲੇ ਸੰਗਮਰਮਰ ਦੇ ਉਦਾਹਰਣ
ਚਿੱਤਰ ਨੂੰ ਕਾਲੇ ਸੰਗਮਰਮਰ ਵਿੱਚ ਬਦਲੋ:
img { filter: sepia(100%); }
ਬਹੁਤ ਸਾਰੇ ਫਿਲਟਰਾਂ ਦਾ ਉਪਯੋਗ
ਬਹੁਤ ਸਾਰੇ ਫਿਲਟਰਾਂ ਦਾ ਉਪਯੋਗ ਕਰਨ ਲਈ ਹਰੇਕ ਫਿਲਟਰ ਨੂੰ ਸਪੇਸ ਨਾਲ ਵੰਡੋ।ਧਿਆਨ ਦੇਓ ਕਿ ਕਿਸ ਕ੍ਰਮ ਵਿੱਚ ਫਿਲਟਰਾਂ ਦਾ ਉਪਯੋਗ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ (ਉਦਾਹਰਣ ਵਜੋਂ sepia() ਦੇ ਬਾਅਦ grayscale() ਦਾ ਉਪਯੋਗ ਕਰਨ ਨਾਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਲੇਰਾ ਚਿੱਤਰ ਪੈਦਾ ਹੋ ਸਕਦਾ ਹੈ):
img { filter: contrast(200%) brightness(150%); }
ਸਾਰੇ ਫਿਲਟਰ
ਸਾਰੇ ਫਿਲਟਰ ਫੰਕਸ਼ਨਾਂ ਦਰਸਾਉਣ:
.blur { filter: blur(4px); } .brightness { filter: brightness(0.30); } .contrast { filter: contrast(180%); } .grayscale { filter: grayscale(100%); } .huerotate { filter: hue-rotate(180deg); } .invert { filter: invert(100%); } .opacity { filter: opacity(50%); } .saturate { filter: saturate(7); } .sepia { filter: sepia(100%); } .shadow { filter: drop-shadow(8px 8px 10px green); }
ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ
ਸਾਰੇ ਪੱਧਰਾਂ ਵਿੱਚ ਨੰਬਰ ਇਹ ਪ੍ਰਤੀਕ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਦੇ ਪਹਿਲੇ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。
ਪਹਿਲੀ ਵਰਜਨ ਦੇ ਪ੍ਰਤੀਕ ਨਾਲ -webkit- ਸਮਾਨ ਨੰਬਰ ਦਰਸਾਉਂਦੇ ਹਨ。
ਚਰਮੀ | IE / ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
---|---|---|---|---|
53.0 18.0 -webkit- |
13.0 | 35.0 | 9.1 6.0 -webkit- |
40.0 15.0 -webkit- |
ਟਿੱਪਣੀਆਂ:ਮੁਢਲੀਆਂ ਵਰਜਨਾਂ ਦਾ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ (4.0 ਤੋਂ 8.0) ਅਣਮਾਨਯੋਗ ਗ਼ੈਰ ਮਿਆਰ ਦੇ "filter" ਪੈਰਾਮੀਟਰ ਨੂੰ ਸਮਰਥਾ ਦਿੰਦਾ ਹੈ।ਜਦੋਂ ਆਈਈ8 ਅਤੇ ਘੱਟ ਤੋਂ ਘੱਟ ਦੀ ਸਮਰਥਾ ਚਾਹੀਦੀ ਹੈ ਤਾਂ ਇਹ ਮੁੱਖ ਤੌਰ 'ਤੇ ਬਿਨਾਂ ਟ੍ਰਾਂਸਪਰੈਂਸੀ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。
- ਪਿਛਲਾ ਪੰਨਾ empty-cells
- ਅਗਲਾ ਪੰਨਾ flex