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

Question

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

Comments

यहां एक लेख का लिंक दिया गया है, जो सीएसएस का उपयोग करके पारदर्शिता को लागू करने की विधि का वर्णन करता है। domedia.org/oveklykken/css-transparency.php खबरदार हालांकि ऐसा लगता है कि क्रॉस ब्राउज़र समर्थन एक मुद्दा हो सकता है जो आपके कार्यान्वयन को बदलने का कारण हो सकता है।

— बंजमन

क्या आपका मतलब है कि नेस्टेड तत्वों को प्रभावित किए बिना एक दिव्य पृष्ठभूमि के लिए अपारदर्शिता कैसे सेट करें?

— बेन

संभावित डुप्लिकेट मैं सीएसएस का उपयोग करके पाठ या छवि को पारदर्शी पृष्ठभूमि कैसे दे सकता हूं?

— डेनिकोट्रा

देखें: stackoverflow.com/questions/806000/…

— danicotra

Answer 1

उपयोग करें rgba():

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

इससे आपको 50% अपारदर्शिता मिलेगी जबकि बॉक्स की सामग्री में 100% अपारदर्शिता बनी रहेगी।

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

Comments

हाँ, IE rgba का समर्थन करता है, इसका सिंटैक्स #ARGB है और इसे फ़िल्टर के रूप में लिखा गया है: progid: DXImageTransform.Microsoft.gradient (startColorstr = # AARRGGBBAA, endColorn = # AARRGGBBAA); यह मूल रूप से एक स्थिर रंग का एक ढाल है, लेकिन पारदर्शिता के साथ।

— तरुण

के background:साथ बदलेंbackground-color:

— गेब्रियलज़ेलो

background-colorसे ज्यादा सही नहीं है background।

— सीन

@ सीन क्या यह अधिक विशिष्ट और इरादा-खुलासा है, फिर? व्यक्तिगत रूप से मैं इस मामले में इसका उपयोग करना पसंद करता हूं, लेकिन क्या कोई कारण है जो अच्छी प्राथमिकता नहीं है?

— डेव स्लटज़किन

@DaveSlutzkin यह एक अच्छी प्राथमिकता है और इसमें कुछ भी गलत नहीं है, लेकिन संपादन व्यक्तिगत पसंद के आधार पर नहीं किए जाने चाहिए। अन्यथा, प्रश्न अलग-अलग संस्करणों के बीच दोलन करते रहेंगे क्योंकि विरोधी वरीयता वाले लोग उनका सामना करते हैं।

— सीन

Answer 2

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

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

Answer 3

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

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

Answer 4

जानकार अच्छा लगा

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

ध्यान दें

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

Comments

IE6 PNGs का समर्थन करता है, यहां तक ​​कि पारदर्शी वाले: फ़िल्टर: progid: DXImageTransform.Microsoft.AlphaImageLoader (सक्षम = सत्य, sizingMethod = स्केल, src = '' filename.png ');

— 05 बजे मन्मल

@manmal लेकिन आपने अपना IE फिक्स कहां रखा है? सीधे .css फ़ाइल में?

— थलत्त

@ थलत्ता हाँ, बस कोशिश करो।

— मणिमाल

Answer 5

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

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

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

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

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

Comments

पीएनजी को सिर्फ इसलिए आकार देना क्योंकि आपका टूल इतना भद्दा है कि वह इसका समर्थन नहीं करता है? वास्तव में ...

— juriks

Answer 6

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

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

#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 7

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 
}

Comments

इस कोड स्निपेट के लिए धन्यवाद, जो कुछ सीमित, तत्काल सहायता प्रदान कर सकता है। एक उचित व्याख्या यह दर्शाती है कि समस्या का एक अच्छा समाधान क्यों है, यह दिखा कर इसके दीर्घकालिक मूल्य में बहुत सुधार होगा , और यह भविष्य के पाठकों को अन्य, समान प्रश्नों के साथ और अधिक उपयोगी बना देगा। कृपया कुछ स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें, जिसमें आपके द्वारा की गई धारणाएँ शामिल हैं।

— ugबग

Answer 8

इसे इस्तेमाल करे:

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

Comments

इससे सामग्री में 50% अपारदर्शिता भी होगी।

— तरुण

यह आसानी से सीएसएस द्वारा तय किया जा सकता है: .transparent * { opacity:1; }जब तक, उदाहरण के लिए, transparentवर्ग के साथ एक तत्व में आंतरिक html

— टिम कुक