CSS opacity() ਫੰਕਸ਼ਨ

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

CSS opacity() ਫਿਲਟਰ ਫੰਕਸ਼ਨ ਐਲੀਮੈਂਟ ਨੂੰ ਪਾਰਦਰਸ਼ਤਾ ਪ੍ਰਭਾਵ ਲਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

  • 100%（ਜਾਂ 1）ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ
  • 50%（ਜਾਂ 0.5）ਐਲੀਮੈਂਟ ਨੂੰ 50% ਪਾਰਦਰਸ਼ੀ ਬਣਾ ਦੇਵੇਗਾ
  • 0%（ਜਾਂ 0）ਐਲੀਮੈਂਟ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਾਰਦਰਸ਼ੀ ਬਣਾ ਦੇਵੇਗਾ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਚਿੱਤਰ ਲਈ ਵੱਖ-ਵੱਖ ਪਾਰਦਰਸ਼ਤਾ ਸੈਟ ਕਰੋ:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

ਸਵੈਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

ਵਰਤੋਂ opacity() ਨਾਲ backdrop-filter ਸਾਰੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਮਿਲਾ ਕੇ ਵਰਤੋਂ:

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

ਸਵੈਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਸ਼ਬਦਕੋਸ਼

opacity(amount)
ਮੁੱਲ ਵਰਣਨ
amount

ਵਿਕਲਪਿਕ।ਪਾਰਦਰਸ਼ਤਾ ਦੀ ਗਿਣਤੀ ਜਾਂ ਪ੍ਰਤੀਸ਼ਤ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ।0%（ਜਾਂ 0）ਐਲੀਮੈਂਟ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਾਰਦਰਸ਼ੀ ਬਣਾ ਦੇਵੇਗਾ。

100%（ਜਾਂ 1）ਮੂਲ ਚਿੱਤਰ (ਨਾ ਕੋਈ ਪ੍ਰਭਾਵ) ਦਿਸਾਉਂਦਾ ਹੈ।ਮੂਲ ਰੂਪ ਵਿੱਚ 1 ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਸੰਸਕਰਣ: CSS Filter Effects Module Level 1

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

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

ਚਰਮੋਨੀ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
18 12 35 6 15

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹਦਾਰੀ:CSS فیلٹر کی کیپٹی

ਸਲਾਹਦਾਰੀ:CSS blur() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰੀ:CSS brightness() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰੀ:CSS contrast() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰੀ:CSS drop-shadow() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰੀ:CSS grayscale() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰੀ:CSS hue-rotate() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰੀ:CSS invert() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰੀ:CSS saturate() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰੀ:CSS sepia() ਫੰਕਸ਼ਨ