html - How does :before work in css? -


कोड में: 

  & lt;! DOCTYPE html & gt; & LT; html & gt; & Lt; शीर्ष & gt; & LT; शैली & gt; । Parent {स्थिति: निरपेक्ष; शीर्ष: 500px; चौड़ाई: 400px; सीमा: 1 पीएक्स ठोस हरा; }। Parent: before {z-index: -1; सामग्री:''; स्थिति: पूर्ण; अस्पष्टता: 0.5; चौड़ाई: 400px; ऊँचाई: 200px; पृष्ठभूमि छवि: यूआरएल ( 'wallpaper324845.jpg'); सीमा: 1px ठोस लाल; }। चाइल्ड {रंग: काला; सीमा: 1px ठोस काला; } & Lt; / style & gt; & Lt; / head & gt; & LT; बॉडी & gt; & Lt; div class = "parent" & gt; & Lt; div class = "child" & gt; हैलो मैं बच्चा हूँ & lt; / div & gt; & Lt; / div & gt; & Lt; / body & gt; & Lt; / html & gt;

मैं इस धागे में बताए अनुसार एक पारदर्शी पृष्ठभूमि बनाने की कोशिश कर रहा हूं।।

चौथे उत्तर से कोड को देखकर। यह कैसे काम करता है, मैं .parent और .parent: before के उपयोग से भ्रमित हूं। मुझे लगता होगा कि इससे प्रत्येक मूल तत्व से पहले एक । Parent: before तत्व पैदा होगा। वास्तव में उलझन में यह कैसे काम करता है?

सीएसएस का उपयोग कर एक आभासी सामग्री बनाता है, इसलिए उपरोक्त मामले में, लेखक स्निपेट का मतलब नीचे का मतलब है 

 । Parent: before {z-index: -1; सामग्री:''; स्थिति: पूर्ण; अस्पष्टता: 0.5; चौड़ाई: 400px; ऊँचाई: 200px; पृष्ठभूमि छवि: यूआरएल ( 'wallpaper324845.jpg'); सीमा: 1px ठोस लाल; }

वह : से पहले का उपयोग करके एक वर्चुअल तत्व बना रहा है, जिसके बाद वह पूर्ण को स्थान देता है, कुछ आयाम देता है, और < कोड> पृष्ठभूमि , यह सुनिश्चित करने के लिए कि वह div सामग्री से नीचे रहता है, वह z-index: -1;

< P> दूसरे शब्दों में, : से पहले , : के बाद कुछ भी नहीं है, लेकिन अपने div के अंदर दो span तत्वों को मान लें , लेकिन छद्म तत्वों का उपयोग करके, आपको span होने की आवश्यकता नहीं है जैसा कि आप छद्म तत्वों के साथ एक ही चीज़ प्राप्त कर सकते हैं।

आप पर विचार करें ऐसा कुछ है 

  & lt; div & gt; हैलो & lt; span & gt; & lt; / span & gt; & Lt; / div & gt; Div {स्थिति: रिश्तेदार; } Div span {स्थिति: निरपेक्ष; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि: # एफ 00; Z- इंडेक्स: -1; बाएं: 0; शीर्ष: 0; }

भी : या : के बाद का उपयोग करके प्राप्त किया जा सकता है, मार्कअप एक ही रहता है लेकिन सीएसएस जैसे 

  div {स्थिति: रिश्तेदार; } Div: after {content: ""; स्थिति: पूर्ण; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि: # एफ 00; Z- इंडेक्स: -1; बाएं: 0; शीर्ष: 0; }

अतः, यह आपके HTML में एक खाली तत्व बचाता है, लेकिन अगर आप ऊपर सीएसएस को देखते हैं, तो संपत्ति का उपयोग कर रहा हूं जो कि हमेशा

इसके अलावा, ध्यान दें कि : से पहले और : के बाद उत्पन्न सामग्री इनलाइन है, इसलिए ऊंचाई , चौड़ाई काम, आपको स्पष्ट रूप से डिस्प्ले: ब्लॉक; या डिस्प्ले: इनलाइन-ब्लॉक; का उल्लेख करने की आवश्यकता है, यदि आप इसे ब्लॉक करना चाहते हैं स्तर, लेकिन इस विशेष मामले में, आपको इसकी आवश्यकता नहीं होगी क्योंकि छद्म तत्व पूर्ण 

  div: after {content: "Hello"; मार्जिन-शीर्ष: 20px; / * यह काम नहीं करता क्योंकि छद्म डिफ़ॉल्ट रूप से इनलाइन है / /

ऐसा ब्लॉक या इनलाइन-ब्लॉक


Comments

Post a Comment

Popular posts from this blog

c# - Reactive Extensions ControlScheduler -

Well, I'm using Reactive Extension Event Handler to handle my app events, I run the headlines on the Yuri thread. I also use ControlSubular for However, recently I am getting cross thread exception despite using control scheduler and I do not know what the problem is. Code: Observable.FromEventPattern & Lt; String & gt; (CC, "UiAlertMessage", New Control Session ()) Subscribe (_ = & gt; {Alert Control. (Show this language, title, _.EventArgs.UppercaseFirst ());}); The new control scheduler (this) is not to run the code on the UI control thread, so I do not get cross threading exceptions? you should do Observable.FromEventPattern & lt; String & gt; (CC, "UiAlertMessage"). AboveOption (this). Subscribe (_ = & gt; {Alert Control. (Show this language, Titles, _.EventArgs.UppercaseFirst ());}); This is the standard way of sending a scheduler related to specific controls. Passing control scheduler as you have got subsc...
Read more

scala - Play Framework - how to bind form to a session field -

Is there any way, I can get some parameters from the header, cookies (log in userId in my case) , And then apply it in a form which I know who will deposit the ticket? SupportForm supportForm: form [supportTicket] = form (mapping ("question" -> text, "priority" -> text) (apply support ticket. (HelpText.update) What are the good practices here? What is the call to apply the request, when I can use it (and also a good practice?) Edit An issue, absolutely deceiving anyone if I were to create a hidden area with this value. It could Ript, but the issue may be re-used in any way to verify and return the form, it can not be sure how it ....
Read more

c++ - Why does Visual Studio Release build break on non-executing code line -

When I created my C ++ program with the default release configuration in Visual Studio 10, I put a breakpoint on one line Who should never be reached. What confunded me was that when the program is running then it stopped at the breaking point. Adding a volatile statement and transferring this line to the break point does not break the execution of the code where the brake appears (though does not produce the same behavior as creating a minimum project with this function). Why is the "Release Debugger" (?) Step on this line and when executing breakpoints are executed? If I keep going after the break then false statement continues to return code execution. bool bounding box :: Cutting (int32_t xpos, int32_t ypos, int32_t dx, int32_t dy) const {int32_t intersectionX; Int32_t intersections; If ((dx> 0 & amp; amp; and & amp; xpos> rights) || (dx gt; Top) || (D & LT; 0 & amp; AOPO & Lt; BOT)) Return; If (DX! = 0) {intersection Y = ypos + (left...
Read more