मैं अर्द्ध पारदर्शी पृष्ठभूमि कैसे बना सकता हूं?

Question

मुझे किसी और चीज को प्रभावित किए बिना 50% पारदर्शी सफेद पृष्ठभूमि बनाने की आवश्यकता है। मैं यह कैसे करुं?

Answer 1

उपयोग rgba():

.transparent{ 
    background:rgba(255,255,255,0.5); 
} 

यह आपको 50% अस्पष्टता, जबकि बॉक्स की सामग्री 100% अस्पष्टता बनी रहेगी दे देंगे।

यदि आप opacity:0.5 का उपयोग करते हैं, तो सामग्री को पृष्ठभूमि के साथ-साथ फीका भी किया जाएगा। इसलिए इसका इस्तेमाल न करें।

Answer 2

इस प्रयास करें:

.transparent 
{ 
    opacity:.50; 
    -moz-opacity:.50; 
    filter:alpha(opacity=50); 
} 

Answer 3

यह जानना अच्छा है

कुछ वेब ब्राउज़र पारदर्शी पृष्ठभूमि के शीर्ष पर छाया के साथ पाठ प्रस्तुत करने के लिए कठिनाई होती है। फिर आप एक अर्ध पारदर्शी 1x1 पीएनजी छवि पृष्ठभूमि के रूप में उपयोग कर सकते हैं।

नोट

याद रखें कि IE6 PNG फ़ाइलें समर्थन नहीं करते।

Answer 4

1x1 सेमी पारदर्शी पीएनजी का उपयोग न करें। पीएनजी को 10x10, 100x100, आदि तक आकार दें। जो भी आपके पृष्ठ पर समझ में आता है। (मैंने 200x200 पीएनजी का उपयोग किया था और यह केवल 0.25 केबी था, इसलिए फ़ाइल आकार पर कोई वास्तविक चिंता नहीं है।)

इस पोस्ट पर जाने के बाद, मैंने अपना वेब पेज 3, 1x1 पीएनजी के साथ अलग पारदर्शिता के साथ बनाया।

ड्रीमवेवर सीएस 5 टैंकिंग था। मैं डॉस को फ्लैश बैक ले रहा था !!! जाहिर है जब भी मैंने स्क्रॉल करने की कोशिश की, टेक्स्ट डालें, मूल रूप से कुछ भी करें, डीडब्ल्यू एक समय में अर्ध पारदर्शी क्षेत्रों 1x1 पिक्सेल को फिर से लोड करने का प्रयास कर रहा था ... YIKES!

एडोब टेक समर्थन को यह भी पता नहीं था कि समस्या क्या थी, लेकिन मुझे फाइल को पुनर्निर्माण करने के लिए कहा (यह घटनाओं पर, उनके सिस्टम पर काम करता था)। यह तब हुआ जब मैंने पहली पारदर्शी पीएनजी को सीएसएस फ़ाइल में लोड किया था जिसे डॉक्टर फिर से गहरा कर देता था।

फिर मुझे ड्रीमवेवर को दुर्घटनाग्रस्त पीएनजी के बारे में एक और सहायता साइट पर एक पोस्ट मिली। अपने पीएनजी को आकार दें; ऐसा करने के लिए कोई नकारात्मक पक्ष नहीं है।

Answer 5

यह काम करता है, लेकिन इस वर्ग के साथ तत्व के सभी बच्चे भी इसे रोकने के किसी भी तरीके से धुंधला हो जाएंगे।

.css-class-name { 
    opacity:0.8; 
} 

Answer 6

आप पारदर्शी पृष्ठभूमि ग्रे है बनाना चाहते हैं, कृपया कोशिश: दिनांकित हालांकि

.transparent{ 
     background:rgba(1,1,1,0.5); 
    } 

Answer 7

, इस धागे पर नहीं एक ही जवाब सार्वभौमिक इस्तेमाल किया जा सकता। पारदर्शी रंग मास्क बनाने के लिए आरजीबीए का उपयोग करना - जो बिल्कुल पृष्ठभूमि छवियों के साथ ऐसा करने की व्याख्या नहीं करता है।

मेरा समाधान पृष्ठभूमि छवियों या रंग पृष्ठभूमि के लिए काम करता है।

#parent { 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    font-size: 19px; 
 
    text-transform: uppercase; 
 
    border-radius: 50%; 
 
    margin: 20px auto; 
 
    width: 125px; 
 
    height: 125px; 
 
    background-color: #476172; 
 
    background-image: url('https://unsplash.it/200/300/?random'); 
 
    line-height: 29px; 
 
    text-align:center; 
 
} 
 

 
#content { 
 
    color: white; 
 
    height: 125px !important; 
 
    width: 125px !important; 
 
    display: table-cell; 
 
    border-radius: 50%; 
 
    vertical-align: middle; 
 
    background: rgba(0,0,0, .3); 
 
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

Answer 8

div.main{ 
    width:100%; 
    height:550px; 
    background: url('https://images.unsplash.com/photo-1503135935062- 
    b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat; 
    background-position:center; 
    background-size:cover 
} 
div.main>div{ 
    width:100px; 
    height:320px; 
    background:transparent; 
    background-attachment:fixed; 
    border-top:25px solid orange; 
    border-left:120px solid orange; 
    border-bottom:25px solid orange; 
    border-right:10px solid orange; 
    margin-left:150px 
}