मैंने माता-पिता और बच्चे के लिए सीएसएस स्थिति पर कई अलग-अलग क्रमपरिवर्तन की कोशिश की। मेरे पास 3 कोशिकाओं के साथ एक स्प्राइटशीट है। मेरे पास कुछ पुराना कोड है जो पृष्ठभूमि छवि चाल का उपयोग करता है और मैं इसे सीएसएस के अंदर क्लिप: रेक्ट () का उपयोग करने के लिए अपडेट करने का प्रयास कर रहा हूं। आदर्श रूप से मेरे पास एक अवधि होगी जो प्रदर्शन आकार को नियंत्रित करती है। और छवि पर सीएसएस गुणों के संयोजन को सही सेल मिलेगा। मुझे यहां क्या समझ नहीं आ रहा है?

<html>
    <head>
        <style>
        .marketItemImage{
            display: inline-block;
            width: 100px;
            height: 104px;
            border: 3px solid black;
            overflow: hidden;
        }
        img {
            clip: rect("0px 300px 104px 200px");
        }
        </style>
    </head>
    <body>
        <span class="marketItemImage">
            <img src="http://villagegamedev2.appspot.com/client/assets/textures/sprites/plantsSmall.png" />
        </span>
    </body>
</html>
3
Darian311 7 जुलाई 2016, 04:26

1 उत्तर

सबसे बढ़िया उत्तर

ठीक है, आप क्लिप मान को rect(top, right, bottom, left) में बदलना चाह सकते हैं, फिर अपनी छवि की स्थिति को absolute में बदल सकते हैं ताकि आप उसकी स्थिति को स्वतंत्र रूप से समायोजित कर सकें (left/top)। फिर आपको span ब्लॉक के आकार और आपके स्प्राइट के आकार के आधार पर तदनुसार top/left की गणना करनी होगी।

यहाँ एक उदाहरण है।

clip संपत्ति पर कुछ बुनियादी जानकारी यहां पाई जा सकती है http://www.w3schools.com /cssref/pr_pos_clip.asp

.marketItemImage {
  display: inline-block;
  width: 100px;
  height: 104px;
  border: 3px solid black;
  overflow: hidden;
}
img {
  position: absolute;
  left: -189px;
  clip: rect(0px, 300px, 104px, 200px);
}
 <span class="marketItemImage">
            <img src="http://villagegamedev2.appspot.com/client/assets/textures/sprites/plantsSmall.png" />
        </span>
3
Nguyen Tuan Anh 7 जुलाई 2016, 04:37
मुझे आश्चर्य है कि बाएं: -189px की आवश्यकता है। मैं उस सब का ख्याल रखने के लिए क्लिप की उम्मीद कर रहा था।
 – 
Darian311
7 जुलाई 2016, 05:14
ठीक है अब मैं समझ गया। क्लिप रेक्ट पैरामीटर अंतर्निहित छवि को बिल्कुल भी स्थानांतरित नहीं करते हैं। स्थिति के लिए आपको अभी भी सीएसएस बाएं और शीर्ष का उपयोग करना होगा।
 – 
Darian311
7 जुलाई 2016, 06:05