इस पर तत्व के साथ सीमा के टुकड़े को कैसे कवर किया जाए?

In this example, div की सीमा के शीर्ष पर एक संख्या लटक रही है। इसे स्पष्ट करने के लिए, सीमा का कौन सा हिस्सा मैं संख्या के साथ कवर करना चाहता हूं, मैंने संख्या के लिए सीमा भी दी। निश्चित रूप से, हम संख्या के लिए पृष्ठभूमि रंग दे सकते हैं, लेकिन फिर शरीर की पृष्ठभूमि छवि छिपी जा रही है। संख्या पारदर्शिता के साथ हम सीमा के टुकड़े को कैसे छिपा सकते हैं?इस पर तत्व के साथ सीमा के टुकड़े को कैसे कवर किया जाए?

HTML:

<div class="reg-step first-step"> 
    <span class="step-number">1</span> 
    <img src="" alt="Register"> 
    <h1>Register</h1> 
    <div class="steps-separator"></div> 
    <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p> 
</div>

सीएसएस:

body{ 
    background: blue; 
    padding-top: 30px; 
    background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png') 
} 
.reg-step { 
    width: 240px; 
    height: 325px; 
    border: 3px solid white; 
    color: white; 
    position: relative; 
    text-align: center; 
    padding: 0px 7px; 
} 
.reg-step h1 { 
    font-size: 14px; 
    text-transform: uppercase; 
} 
.reg-step p { 
    font-size: 11px; 
} 
.reg-step img { 
    display: block; 
    margin: 10px auto 20px; 
} 
.reg-step .step-number { 
    font-size: 40px; 
    margin: 0 auto; 
    display: inline-block; 
    position: relative; 
    top: -23px; 
    width: 50px; 
    border: 1px solid black; 
    background-color: blue; 
} 
.reg-step .steps-separator { 
    width: 90%; 
    margin: 20px auto; 
    height: 1px; 
    background-color: white; 
    padding: 0px 7px; 
}

वांछित परिणाम इस प्रकार है:

स्रोत

2016-08-11 ksno

आप

<fieldset>

कि के लिए

उपयोग कर सकते हैं।

जांच फिडलhttps://jsfiddle.net/sepyzund/

एचटीएमएल:

<fieldset class="reg-step first-step"> 
    <legend class="step-number">1</legend> 
    <img src="" alt="Register"> 
    <h1>Register</h1> 
    <div class="steps-separator"></div> 
    <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p> 
</fieldset>

सीएसएस:

body{ 
    background: blue; 
    padding-top: 30px; 
    background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png') 
} 
.reg-step { 
    width: 240px; 
    height: 325px; 
    border: 3px solid white; 
    color: white; 
    position: relative; 
    text-align: center; 
    padding: 0px 7px; 
} 
.reg-step h1 { 
    font-size: 14px; 
    text-transform: uppercase; 
} 
.reg-step p { 
    font-size: 11px; 
} 
.reg-step img { 
    display: block; 
    margin: 10px auto 20px; 
} 
.reg-step .step-number { 
    font-size: 40px; 
    display: block; 
    margin: 0 auto; 
    width: 50px; 
    border: 1px solid black; 
} 
.reg-step .steps-separator { 
    width: 90%; 
    margin: 20px auto; 
    height: 1px; 
     background-color: white; 
    padding: 0px 7px; 
}

स्रोत

2016-08-11 07:23:52 Honza

हाँ, ठीक वही जो मैं खोज रहा था। रास्ते में फ़ायरफ़ॉक्स पेंच। फ़ील्ड में कुछ गड़बड़ केंद्रित किंवदंती है। लेकिन ' किंवदंती 'ठीक करता है। – ksno

आप रंग पारदर्शिता चाहते हैं, आप color: rgba(255, 255, 255, 0.5); यहाँ के रूप में लिख सकते हैं अंतिम पैरामीटर अल्फा आपका पारदर्शिता स्तर है। आप और के बीच पारदर्शिता सेट कर सकते हैं।

स्रोत

2016-08-11 07:13:35

जो तत्व मैं इस नियम लागू करना चाहिए के लिए? मुझे लगता है कि पृष्ठभूमि या फ़ॉन्ट रंग की पारदर्शिता ** ** ** सीमा को छुपाएगी, क्योंकि यह trasnparent है। – ksno

यदि आप सीमा को छिपाना चाहते हैं, तो आप 'सीमा: 1 पीएक्स ठोस आरजीबीए (0, 0, 0, 0) के रूप में लिख सकते हैं; और यह आपकी सीमा को छुपाता है। –

सवाल यह है कि "सीमा के ** टुकड़े ** को कैसे कवर/छुपाएं ....?" – ksno

पहले विचार यह है कि मेरे दिमाग में आया था। मुश्किल सीमा के साथ में .reg-step:after और छद्म और दाएं लोगों के लिए .reg-step में .reg-step:after जैसे छद्म उपयोग का उपयोग करें। इस जाँच करें:

body{ 
 
    background: blue; 
 
    padding-top: 30px; 
 
    background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png') 
 
} 
 
.reg-step { 
 
    width: 240px; 
 
    height: 325px; 
 
    color: white; 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 0px 7px; 
 
    
 
    border: 3px solid; 
 
    border-image: linear-gradient(to right, white 40%, transparent 40%, transparent 60%, white 60%) 1; 
 
} 
 
.reg-step:after { 
 
    content: " "; 
 
    position:absolute; 
 
    top:0px; left:0px; 
 
    width:100%; 
 
    height:100%; 
 
    border-bottom: 3px solid white; 
 
} 
 
.reg-step h1 { 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
} 
 
.reg-step p { 
 
    font-size: 11px; 
 
} 
 
.reg-step img { 
 
    display: block; 
 
    margin: 10px auto 20px; 
 
} 
 
.reg-step .step-number { 
 
    font-size: 40px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
    position: relative; 
 
    top: -23px; 
 
    width: 50px; 
 
    border: 1px solid black; 
 
} 
 
.reg-step .steps-separator { 
 
    width: 90%; 
 
    margin: 20px auto; 
 
    height: 1px; 
 
    background-color: white; 
 
    padding: 0px 7px; 
 
}

<div class="reg-step first-step"> 
 
    <span class="step-number">1</span> 
 
    <img src="" alt="Register"> 
 
    <h1>Register</h1> 
 
    <div class="steps-separator"></div> 
 
    <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p> 
 
</div>

स्रोत

2016-08-11 07:41:17

बहुत रोचक, मैंने सोचा कि मुझे आपके उत्तर को सही के रूप में स्वीकार करना चाहिए, क्योंकि '

' टैग किसी प्रपत्र में संबंधित तत्वों को समूहित करने के लिए उपयोग किया जाता है। लेकिन फिर थोड़ा सा शोध और [फॉर्म के बिना फ़ील्डसेट का उपयोग करने के लिए इसका वैध HTML5] (http://stackoverflow.com/questions/9812898/is-it-wrong-to-use-the-fieldset-tag-without-form- टैग) ':] 'होन्ज़ा थोड़ा तेज था .. – ksno

कोई कठोर भावना नहीं ... –

इस पर तत्व के साथ सीमा के टुकड़े को कैसे कवर किया जाए?

उत्तर

संबंधित मुद्दे