सीएसएस छवि प्रतिबिंब
इस अध्याय में आप सीखेंगे कि छवि को कैसे प्रतिबिंबित किया जाए।
सीएसएस छवि प्रतिबिंब
संपत्ति का box-reflectउपयोग छवि प्रतिबिंब बनाने के लिए किया जाता है।
संपत्ति का मूल्य box-reflectहो सकता है: below, above,
left, या right।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट के बाद की संख्याएं- उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
| Property | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
उदाहरण
उदाहरण
यहां हम छवि के नीचे प्रतिबिंब चाहते हैं:
img {
-webkit-box-reflect: below;
}
उदाहरण
यहां हम छवि के दाईं ओर प्रतिबिंब चाहते हैं:
img {
-webkit-box-reflect: right;
}
सीएसएस प्रतिबिंब ऑफसेट
छवि और प्रतिबिंब के बीच के अंतर को निर्दिष्ट करने के लिए, अंतर के आकार को box-reflectगुण में जोड़ें।
उदाहरण
यहां हम छवि के नीचे प्रतिबिंब चाहते हैं, 20px ऑफसेट के साथ:
img {
-webkit-box-reflect: below 20px;
}
ग्रेडिएंट के साथ सीएसएस परावर्तन
हम प्रतिबिंब पर एक फीका प्रभाव भी बना सकते हैं।
उदाहरण
प्रतिबिंब पर एक फीका प्रभाव बनाएँ:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}