tutorial - what is css in english




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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

ध्यान दें

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


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