سی ایس ایس پس منظر

CSS ਪਿੱਨ ਪ੍ਰਾਪਰਟੀਆਂ ਇਕਾਈ ਦੇ ਪਿੱਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀਆਂ ਹਨ。

ਇਨ੍ਹਾਂ ਚਿੱਤਰਾਂ ਵਿੱਚ ਤੁਸੀਂ ਨਿਮਨਲਿਖਤ CSS ਪਿੱਨ ਪ੍ਰਾਪਰਟੀਆਂ ਨੂੰ ਸਿੱਖੋਗੇ:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color ਪ੍ਰਾਪਰਟੀ ਇਕਾਈ ਦੇ ਪਿੱਨ ਰੰਗ ਨੂੰ ਸੈਟ ਕਰਦੀ ਹੈ。

实例

ਪੰਨੇ ਦਾ ਪਿੱਨ ਰੰਗ ਇਹ ਤਰੀਕੇ ਨਾਲ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ:

body {
  background-color: lightblue;
}

亲自试一试

CSS ਰਾਹੀਂ ਰੰਗ ਜਾਂਚਾਰੀ ਇਹ ਤਰੀਕੇ ਨਾਲ ਸੈਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ:

  • ਪ੍ਰਮਾਣਿਤ ਰੰਗ ਨਾਮ - ਜਿਵੇਂ "red"
  • ਸਿਕਸ-ਫਲੈਟ ਹੈਕਸਾਡੈਸੀਮਲ ਮੁੱਲ - ਜਿਵੇਂ "#ff0000"
  • RGB ਮੁੱਲ - ਜਿਵੇਂ "rgb(255,0,0)"

ਵੇਖੋ CSS رنگ کا نمائش، ਪੂਰੀ ਰੰਗ ਮੁੱਲ ਸੂਚੀ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ:

ਹੋਰ ਇਕਾਈਆਂ

ਤੁਸੀਂ ਕਿਸੇ ਵੀ HTML ਇਕਾਈ ਨੂੰ ਪਿੱਨ ਰੰਗ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ:

实例

ਇੱਥੇ، <h1>، <p> ਅਤੇ <div> ਇਕਾਈਆਂ ਵੱਖ-ਵੱਖ ਪਿੱਨ ਰੰਗ ਰੱਖਣਗੇ:

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

亲自试一试

ਪਾਰਦਰਸ਼ਤਾ / ਪਾਰਦਰਸ਼ਤਾ

opacity ਪ੍ਰਾਪਰਟੀ ਇਕਾਈ ਦੀ ਪਾਰਦਰਸ਼ਤਾ/ਪਾਰਦਰਸ਼ਤਾ ਨੂੰ ਸੈਟ ਕਰਦੀ ਹੈ। ਮੁੱਲ ਦਾ ਦਾਇਰਾ 0.0 - 1.0 ਹੈ। ਮੁੱਲ ਨਾਲ ਘੱਟ ਹੋਣ ਤੋਂ ਪਾਰਦਰਸ਼ੀ ਤੇਜ਼ੀ ਵਧਦੀ ਹੈ:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

实例

div {
  background-color: green;
  opacity: 0.3;
}

亲自试一试

ਨੋਟ:ਵਰਤੋਂ ਕਰੋ opacity ਜਦੋਂ ਪੈਰੰਟ ਇਕਾਈ ਦੇ ਪਾਰਦਰਸ਼ਤਾ ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਸੈਟ ਕਰਦੇ ਹਨ, ਤਾਂ ਉਸ ਦੇ ਸਾਰੇ ਉਪ ਇਕਾਈਆਂ ਉਸੇ ਪਾਰਦਰਸ਼ਤਾ ਲੈ ਲੈਂਦੀਆਂ ਹਨ। ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਾਰਦਰਸ਼ੀ ਇਕਾਈ ਵਿੱਚ ਲਿਖਤ ਪੜ੍ਹਣ ਵਿੱਚ ਮੁਸ਼ਕਲੀ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ।

RGBA ਦੀ ਪਾਰਦਰਸ਼ਤਾ ਦੀ ਵਰਤੋਂ

ਅਗਰ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਕਿ ਉਪ ਇਕਾਈਆਂ ਉੱਤੇ ਪਾਰਦਰਸ਼ਤਾ ਲਾਗੂ ਹੋਵੇ, ਜਿਵੇਂ ਉੱਪਰ ਦੇ ਉਦਾਹਰਨ, ਉਸ ਦੀ ਵਰਤੋਂ ਕਰੋ: RGBA ਰੰਗ ਮੁੱਲ ਹੇਠ ਦੇ ਉਦਾਹਰਨ ਵਿੱਚ ਪਿੱਨ ਰੰਗ ਨੂੰ ਸੈਟ ਕਰਨਾ ਹੈ ਨਹੀਂ ਕਿ ਟੈਕਸਟ ਦੀ ਪਾਰਦਰਸ਼ਤਾ:

100% opacity
60% opacity
30% opacity
10% opacity

您从我们的 سی ایس ایس رنگ 章节中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道一起使用（RGBA） - 该通道指定颜色的不透明度。

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

提示：您可在我们的 سی ایس ایس رنگ 一章中学到有关 RGBA 颜色的更多知识。

实例

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

亲自试一试