विभिन्न आदेशों में सीएसएस नियम विभिन्न परिणामों की ओर जाता है - सीएसएस, पृष्ठभूमि, मुखौटा

मैंने बस सीएसएस पृष्ठभूमि क्लिप पर एक नज़र डाली।एक छवि के साथ पाठ मुखौटा करने का यह एक तरीका है। (या दूसरी तरफ दौर? ^^)। वैसे भी, मैंने सोचा कि सीएसएस में बयानों का क्रम परिणाम को प्रभावित नहीं करता है, लेकिन पृष्ठभूमि क्लिप के साथ यह करता है।

इस प्रभाव के लिए सीएसएस आमतौर पर इस तरह दिखता है:

.text{
color: transparent;
background: url(pic.ending);
-webkit-background-clip: text;
}

तो, यह पहला है <p> नीचे पहेली में। लेकिन जब मैं इसका पालन करने के लिए निम्न क्रम बदलता हूं:

.text_wrong{
-webkit-background-clip: text;
color: transparent;
background: url(pic.ending);
}

यह काम नहीं करता है। पाठ मास्क नहीं किया गया है, पृष्ठभूमि छेद में होती है <p>। तो त्रुटि तब होती है जब पृष्ठभूमि क्लिप पृष्ठभूमि से पहले है, है ना?

क्यूं कर? क्या तुम्हारे पास कोई विचार है? मेरी खराब इंग्लिश के लिए माफ़ कीजिये। (यहाँ है बेला।)

उत्तर:

जवाब के लिए 3 № 1

background पृष्ठभूमि गुणों के लिए शॉर्टेंड नोटेशन है। यह पहले किए गए सभी अन्य पृष्ठभूमि नियमों को ओवरराइट करेगा। भले ही -webkit-background-clip एक विक्रेता उपसर्ग है यह अभी भी एक पृष्ठभूमि संपत्ति है। आपके दूसरे उदाहरण में जब आप पृष्ठभूमि गुणों को शॉर्टंड नोटेशन के साथ सेट करते हैं तो यह ओवरराइट हो जाता है।

अपना उदाहरण काम करने के लिए आप इसका उपयोग कर सकते हैं background-image के बजाय background

उदाहरण

/* sets a single property */
background-color: red;
/* overwrites all single properties */
background: no-repeat;

डेमो

खरीदने से पहले कोशिश करें


उत्तर № 2 के लिए 1

इसे कैस्केडिंग कहा जाता है और सीएसएस का अंतिम लक्ष्य उन वस्तुओं का प्रतिनिधित्व करना है जिन्हें आखिरी बार कैस्केड में घोषित किया जाता है।

उदाहरण के लिए, आइए स्टाइलशीट में नीचे अपना सीएसएस घोषणापत्र मान लें।

div{height:15px;}

div{height:30px;}

div{height:20px;}

तो div ऊंचाई को ले जाएगा 20px क्योंकि यह अंतिम घोषित नियम है और यह पहले घोषित सभी अन्य नियमों को ओवरराइड करेगा।

उम्मीद है कि यह आपकी क्वेरी हल करता है।


उत्तर № 3 के लिए 1

डब्ल्यू 3 सी के अनुसार मूल्य चश्मा text के लिये background-clip चश्मा में एक सूचीबद्ध मूल्य नहीं है। समर्थन के लिए बदबूदार हो सकता है!

http://www.w3.org/TR/css3-background/#background-clip

पृष्ठभूमि चित्रकला क्षेत्र निर्धारित करता है, जो क्षेत्र निर्धारित करता है जिसके भीतर पृष्ठभूमि चित्रित किया गया है। संपत्ति का वाक्यविन्यास है के साथ दिया गया

= सीमा-बॉक्स | पैडिंग-बॉक्स | सामग्री बॉक्स


संबंधित सवाल
सबसे लोकप्रिय