CSS grayscale() ਫੰਕਸ਼ਨ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

CSS ਦੇ grayscale() ਫਿਲਟਰ ਫੰਕਸ਼ਨ ਚਿੱਤਰ ਨੂੰ ਗ੍ਰੇ ਕਰ ਦਿੰਦਾ ਹੈ。

• 100%（ਜਾਂ 1）ਚਿੱਤਰ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਗ੍ਰੇ ਕਰ ਦਿੰਦਾ ਹੈ
• 0%（ਜਾਂ 0）ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਪੈਦਾ ਕਰਦਾ ਹੈ

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਚਿੱਤਰ ਨੂੰ ਵੱਖ-ਵੱਖ ਗ੍ਰੇ ਮੁੱਲ ਸੈਟ ਕਰੋ:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

ਆਪਣੇ ਆਪ ਨਾਲ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

ਕਰਕੇ grayscale() ਨਾਲ backdrop-filter ਸ਼ਰੂਆਤ ਵਿੱਚ ਵਰਤੇ ਗਏ ਪੈਰਾਮੀਟਰਾਂ ਦਾ ਸਮੂਹ:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: grayscale(50%);
  backdrop-filter: grayscale(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰੇਮੈਟਿਕਸ

grayscale(amount)

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

ਸਾਰੇ ਤੈਬਲ ਵਿੱਚ ਨੰਬਰ ਪਹਿਲੀ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੰਬਰ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਸਬੰਧਤ ਪੰਨੇ

مطالبت:CSS فیلٹر کا پروپرٹی

مطالبت:CSS blur() ਫੰਕਸ਼ਨ

مطالبت:CSS brightness() ਫੰਕਸ਼ਨ

مطالبت:CSS contrast() ਫੰਕਸ਼ਨ

مطالبت:CSS drop-shadow() ਫੰਕਸ਼ਨ

مطالبت:CSS hue-rotate() ਫੰਕਸ਼ਨ

مطالبت:CSS invert() ਫੰਕਸ਼ਨ

مطالبت:CSS opacity() ਫੰਕਸ਼ਨ

مطالبت:CSS saturate() فانکشن

مطالبت:CSS sepia() فانکشن