html - Transparent PNG image doesn't regard background color, and acts as not transparent -

HTML कोड

  & lt;! DOCTYPE html & gt; & LT; html & gt; & Lt; शीर्ष & gt; & Lt; title & gt; मेरी वेबसाइट & lt; / title & gt; & Lt; link href = "style.css" rel = "स्टाइलशीट" प्रकार = "टेक्स्ट / सीएसएस" / & gt; & Lt; / head & gt; & LT; बॉडी & gt; & Lt; div id = "center-box" & gt; & LT; ul & gt; & Lt; li id ​​= "fim" & gt; & lt; img src = "चित्र / 1.png" /> gt; & lt; / li & gt; & Lt; li id ​​= "sim" & gt; & lt; img src = "चित्र / 2.png" /> gt; & lt; / li & gt; & Lt; li id ​​= "tim" & gt; & lt; img src = "चित्र / 3.png" /> gt; & lt; / li & gt; & Lt; li id ​​= "fom" & gt; & lt; img src = "चित्र / 4.png" /> gt; & lt; / li & gt; & Lt; / ul & gt; & Lt; / div & gt; & Lt; / body & gt; & Lt; / html & gt;   
 सीएसएस कोड  
  html {height: 100%; } शरीर {पृष्ठभूमि: काला; सीमा: 1 पीएक्स ठोस सफेद; मार्जिन: 0; गद्दी: 0; स्थिति: पूर्ण; ऊंचाई: 100%; चौड़ाई: 100%; } # केंद्र-बॉक्स {सीमा: 4px ठोस सफेद; सफ़ेद रंग; स्थिति: पूर्ण; चौड़ाई: 250px; ऊंचाई: 250px; बाएं: 50%; शीर्ष: 50%; margin-left: -150px; मार्जिन टॉप: -150px; पृष्ठभूमि: ग्रे; } # केंद्र-बॉक्स उल {सूची-शैली-प्रकार: कोई नहीं; मार्जिन: 5px; गद्दी: 18px; } # केंद्र-बॉक्स ul li {display: inline; } # केंद्र-बॉक्स उल ली: हॉवर {पृष्ठभूमि-रंग: नीला; }   
 इसमें केवल एक पृष्ठ के बीच में एक बॉक्स होता है, और पारदर्शी (पीएनजी) छवियों के साथ एक इनलाइन सूची होती है। मैं एक पारदर्शी छवि को इसके पृष्ठभूमि रंग में बदल कर बदलना चाहता हूं, लेकिन यह काम करता है क्योंकि छवि पारदर्शी नहीं है। आप इसे ठीक करने का सुझाव कैसे देंगे?   
 
 
 मुझे लगता है कि आपको "इनलाइन ब्लॉक" डिस्प्ले का उपयोग करना चाहिए आपके सीएसएस में  li  तत्व:  
  # center-box ul li {display: inline-block; }   
 इस तरह, पृष्ठभूमि को केवल क्षेत्र के टेक्स्ट भाग पर लागू नहीं किया जाएगा, बल्कि पूरी छवि पर।  
 आशा है कि यह मदद करता है!