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




what is css in english (7)

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

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

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


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

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

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


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

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

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

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

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

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

ध्यान दें

याद रखें कि आईई 6 पीएनजी फाइलों का समर्थन नहीं करता है।


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

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

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

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


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 
}





css