सेपिया फ़ंक्शन

sepia फ़ंक्शन बैकग्राउंड इमेज को सेपिया में बदलने की अनुमति देता है - भूरे रंग के रंगत के साथ एक काले और सफेद छवि। 0 मान दर्शाता है, कि छवि मूल रहेगी। 100% या 1 मान पूरी तरह से बैकग्राउंड को सेपिया में बदल देता है। इस सीमा में स्थित कोई भी नंबर सेपिया के अनुप्रयोग को रैखिक रूप से निर्धारित करता है। नकारात्मक मान निर्धारित नहीं किया जा सकता है। डिफ़ॉल्ट रूप से मान 0 के बराबर होता है।

सिंटैक्स

cssसिलेक्टर {
  filter: sepia(संख्या);
}

उदाहरण

आइए हमारी छवि को पूर्ण सेपिया में बनाएं:

html<div id="elem"></div>

css#elem {
  filter: sepia(100%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

उदाहरण

और अब सेपिया के अनुप्रयोग को 50% तक कम करते हैं:

html<div id="elem"></div>

css#elem {
  filter: sepia(50%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

उदाहरण

और अब sepia फ़ंक्शन में मान 0 के बराबर निर्धारित करते हैं:

html<div id="elem"></div>

css#elem {
  filter: sepia(0);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

यह भी देखें