CSS linear-gradient() ਫੰਕਸ਼ਨ

ਨਿਰਧਾਰਿਤ ਅਤੇ ਵਰਤੋਂ

CSS linear-gradient() ਫੰਕਸ਼ਨ ਲਈ ਬੈਕਗਰਾਊਂਡ ਵਾਲੀ ਲਾਈਨਰ ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਉਣਾ

ਲਾਈਨਰ ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਉਣ ਲਈ ਹੋਰ ਤੋਂ ਘੱਟ ਦੋ ਰੰਗ ਕੰਟੇ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਹੁੰਦਾ ਹੈ। ਰੰਗ ਕੰਟੇ ਆਪਣੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨੇ ਹੋਣ ਵਾਲੇ ਰੰਗ ਹਨ। ਤੁਸੀਂ ਵੀ ਸ਼ੁਰੂ ਸਥਾਨ ਅਤੇ ਦਿਸ਼ਾ (ਜਾਂ ਕੋਣ) ਅਤੇ ਗ੍ਰੇਡੀਐਂਟ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ।

ਲਾਈਨਰ ਗ੍ਰੇਡੀਐਂਟ ਉਦਾਹਰਣ:

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਇਹ ਲਾਈਨਰ ਗ੍ਰੇਡੀਐਂਟ ਉੱਪਰੋਕਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ। ਇਹ ਲਾਲ ਰੰਗ ਤੋਂ ਸੂਰਜੀ ਰੰਗ ਤੱਕ ਅਤੇ ਫਿਰ ਨੀਲੇ ਰੰਗ ਤੱਕ ਟ੍ਰਾਂਸੀਟ ਕਰਦੀ ਹੈ:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

亲自试一试

ਉਦਾਹਰਣ 2

ਇੱਕ ਖੱਬੇ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੀ ਲਾਈਨਰ ਗ੍ਰੇਡੀਐਂਟ। ਇਹ ਲਾਲ ਰੰਗ ਤੋਂ ਨੀਲੇ ਰੰਗ ਤੱਕ ਟ੍ਰਾਂਸੀਟ ਕਰਦੀ ਹੈ:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

亲自试一试

ਉਦਾਹਰਣ 3

ਇੱਕ ਖੱਬੇ ਉੱਪਰੋਕਤ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੀ (ਅਤੇ ਉੱਥੋਂ ਸੱਦੇ ਹੋਣ ਵਾਲੀ) ਲਾਈਨਰ ਗ੍ਰੇਡੀਐਂਟ:

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

亲自试一试

ਉਦਾਹਰਣ 4

ਇੱਕ ਨਿਰਧਾਰਿਤ ਕੋਣ ਵਾਲੀ ਲਾਈਨਰ ਗ੍ਰੇਡੀਐਂਟ:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

亲自试一试

ਉਦਾਹਰਣ 5

ਇੱਕ ਬਹੁਤ ਸਾਰੇ ਰੰਗ ਕੰਟੇ ਵਾਲੀ ਲਾਈਨਰ ਗ੍ਰੇਡੀਐਂਟ:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

亲自试一试

例子 6

一个具有两个位置色标的线性渐变：

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

亲自试一试

例子 7

一个具有透明度的线性渐变：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

亲自试一试

CSS 语法

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆਦਾਨ:CSS ਗ੍ਰੇਡੀਐਂਟ

ਸਲਾਹਦਾਰ:سی ایس ایس بیک گراؤنڈ آئیمج اپریشن

ਸਲਾਹਦਾਰ:CSS conic-gradient() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰ:CSS radial-gradient() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰ:CSS repeating-conic-gradient() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰ:CSS repeating-linear-gradient() ਫੰਕਸ਼ਨ

ਸਲਾਹਦਾਰ:CSS repeating-radial-gradient() ਫੰਕਸ਼ਨ