2013-07-19 16 views
34

मैं ऐसे क्लाइंट के लिए ऐसा कुछ करने की कोशिश कर रहा हूं जिसके पास ब्लॉग है।सीएसएस का उपयोग कर पारदर्शी सीमा कैसे बनाएं?

http://i.stack.imgur.com/4h31s.png

वह एक अर्द्ध पारदर्शी सीमा चाहता था। मुझे पता है कि यह सिर्फ एक पृष्ठभूमि बनाने के साथ संभव है। लेकिन मुझे बैनर के लिए इस प्रकार की सीएसएस तकनीक के पीछे तर्क/कोड नहीं दिख रहा है। क्या किसी को भी पता है की यह कैसे किया जाता है? यह मदद का एक बहुत कुछ हो सकता है देखने के लिए है, क्योंकि है कि अपने ग्राहक के अपने ब्लॉग के लिए प्राप्त करने के लिए इच्छुक ....

+0

संभावित डुप्लिकेट: http://stackoverflow.com/questions/4062001/css3-border-opacity – showdev

+1

इस तरह? http://jsfiddle.net/6qJcc/1/ – defaultNINJA

उत्तर

56

आप पूरी तरह से पारदर्शी से आप

border: 5px solid transparent; 

उपयोग कर सकते हैं आप अपारदर्शी/पारदर्शी मतलब तो चाहते हैं अच्छी तरह से करता है, तो , की तुलना में आप

border: 5px solid rgba(255, 255, 255, .5); 

यहाँ उपयोग कर सकते हैं, a अल्फा, जो आप पैमाने पर कर सकते हैं, 0-1 का मतलब है।

इसके अलावा कुछ आप opacity जो एक ही काम के रूप में अच्छी तरह का उपयोग करने का सुझाव दे सकता, फर्क सिर्फ इतना है कि यह अपारदर्शी हो रही भी, हाँ, वहाँ कुछ काम arounds रहे हैं, लेकिन rgbaopacity का उपयोग कर की तुलना में बेहतर रहा है बच्चे के तत्वों का परिणाम देगा है।

पुराने ब्राउज़र के लिए, हमेशा गिरावट पृष्ठभूमि रंग # (हेक्स) का उपयोग कर बस के रूप में वापस की घोषणा है, ताकि अगर पुराने ब्राउज़र rgba को नहीं पहचानता है, वे अपने तत्व को hex रंग लागू होगी।

Demo

Demo 2

Demo 3 (एक background-image के बजाय एक img टैग के साथ)

body { 
    background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg); 
} 

div.wrap { 
    border: 5px solid #fff; /* Fall back, not used in fiddle */ 
    border: 5px solid rgba(255, 255, 255, .5); 
    height: 400px; 
    width: 400px; 
    margin: 50px; 
    border-radius: 50%; 
} 

div.inner { 
    background: #fff; /* Fall back, not used in fiddle */ 
    background: rgba(255, 255, 255, .5); 
    height: 380px; 
    width: 380px; 
    border-radius: 50%; 
    margin: auto; /* Horizontal Center */ 
    margin-top: 10px; /* Vertical Center ... Yea I know, that's 
         manually calculated*/ 
} 

नोट (डेमो 3 के लिए) (नेस्टेड div के लिए एक पृष्ठभूमि छवि के साथ): छवि ऊंचाई के अनुसार स्केल की जाएगी और चौड़ाई प्रदान की जाएगी, इसलिए सुनिश्चित करें कि यह नहीं करता स्केलिंग अनुपात तोड़ नहीं है।

1

उपयोग rgba (alpha transparency साथ आरजीबी):

border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity 

alpha transparency variate 0 (% पारदर्शी 0% अस्पष्टता = 100) और 1 (100 अस्पष्टता = 0% पारदर्शी)

+0

आप "पृष्ठभूमि-क्लिप: पैडिंग-बॉक्स" के उपयोग से बच नहीं सकते हैं; यदि आप एक अलग सीमा चाहते हैं। इस सीएसएस संपत्ति के बिना, पृष्ठभूमि रंग सभी div भर जाएगा, आपकी सीमा पृष्ठभूमि रंग के साथ ढेर किया जाएगा। – Georgio

9

के बीच का उपयोग करना :before छद्म तत्व,
CSS3 के border-radius,
और कुछ पारदर्शिता है काफी आसान:

LIVE DEMO

enter image description here

<div class="circle"></div> 

सीएसएस:

.circle, .circle:before{ 
    position:absolute; 
    border-radius:150px; 
} 
.circle{ 
    width:200px; 
    height:200px; 
    z-index:0; 
    margin:11%; 
    padding:40px; 
    background: hsla(0, 100%, 100%, 0.6); 
} 
.circle:before{ 
    content:''; 
    display:block; 
    z-index:-1; 
    width:200px; 
    height:200px; 

    padding:44px; 
    border: 6px solid hsla(0, 100%, 100%, 0.6); 
    /* 4px more padding + 6px border = 10 so... */ 
    top:-10px; 
    left:-10px; 
} 

:before हमारे .circle एक और तत्व है जो आप केवल करने की जरूरत से जुड़ (ठीक है, खंड , पूर्ण, आदि ...) पारदर्शी और सीमा अस्पष्टता के साथ खेलते हैं।

10

आप border-style: doublebackground-clip: padding-box के साथ किसी भी अतिरिक्त (छद्म-) तत्वों के उपयोग के बिना भी उपयोग कर सकते हैं। यह शायद सबसे कॉम्पैक्ट समाधान है, लेकिन दूसरों के रूप में लचीला नहीं है।

For example:

<div class="circle">Some text goes here...</div> 

.circle{ 
    width: 100px; 
    height: 100px; 
    padding: 50px; 
    border-radius: 200px; 
    border: double 15px rgba(255,255,255,0.7); 
    background: rgba(255,255,255,0.7); 
    background-clip: padding-box; 
} 

Result

तुम करीब से देखो, तो आप देख सकते हैं कि सीमा और पृष्ठभूमि के बीच बढ़त सही नहीं है। यह वर्तमान ब्राउज़र में एक मुद्दा प्रतीत होता है। लेकिन जब सीमा कम है तो यह ध्यान देने योग्य नहीं है।

+0

यह इसे कोई अतिरिक्त मार्कअप के साथ काम करने की अनुमति देता है और [बहुत अच्छा समर्थन है] (http://caniuse.com/#feat=background-img-opts)। 'पृष्ठभूमि-रंग' प्लस' सीमा: डबल '' पृष्ठभूमि-क्लिप 'शैली के बिना सीमाओं के बीच पारदर्शिता के लिए काम नहीं करता है। –

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