SVG इमेज का इस्तेमाल background-imageCSS के साथ-साथ PNG, JPG.webp या GIF की तरह भी किया जा सकता है ।
.element ( background-image: url(/images/image.svg); )एसवीजी की सभी समान विसंगति सवारी के लिए साथ आती है, जैसे तेज को बनाए रखते हुए लचीलापन। इसके अलावा आप कुछ भी कर सकते हैं एक रेखापुंज ग्राफिक दोहराव की तरह कर सकता है।
इस वीडियो में हम एक छद्म तत्व पर पृष्ठभूमि-छवि के माध्यम से एक मॉड्यूल के निचले भाग में "रिप्ड पेपर एज" प्रभाव को लागू करते हुए देखते हैं। इसे करने के लिए एक साफ तरीके की तरह मुख्य तत्व में एक ठोस पृष्ठभूमि रंग हो सकता है जिसे हम मैच कर सकते हैं और पृष्ठ की पृष्ठभूमि को एसवीजी में नकारात्मक स्थान से बहने दें। साथ ही इसे करने के लिए किसी मार्कअप की जरूरत नहीं है। हमने HTML5Hub पर इसका प्रभाव देखा।
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन GAekv देखें।
फ़ाइलें
- 06-रिप। Svg