तत्व अस्पष्टता लेकिन सीमा नहीं

Question

ठीक है, मेरे पास यह प्रश्न है और मैं देखता हूं कि किसी ने पहले ही कुछ ऐसा ही पूछा है लेकिन यह अभी तक मुझे समझ में नहीं आया है।

मैं क्या करना चाहता हूं कि तत्व को 0.7 की अस्पष्टता सेट करना है, लेकिन केवल सामग्री के लिए और सीमा तक नहीं, मैं सीमा को पूर्ण रंग रखना चाहता हूं। यहाँ कुछ उदाहरण कोड:

input#element{ 
    width: 382px; 
    height: 26px; 
    border: 2px solid #FFF; 
    border-radius: 3px; 
    opacity: 0.8; 
} 

परिणाम मेरी इनपुट तत्व अस्पष्टता लेकिन फिर भी सीमा है कि है, किसी ने मुझे बता सकते हैं कि कैसे सिर्फ सामग्री में पारदर्शिता सेट करने नहीं बल्कि सीमा?

धन्यवाद।

Answer 1

उपयोग rgba वाक्य रचना दोनों पूरे तत्व

demo dabblet

input { 
    width: 382px; 
    height: 26px; 
    border: 2px solid #FFF; 
    border-radius: 3px; 
    background: rgba(255, 255, 255, .8); 
    color: rgba(0, 0, 0, .8); 
} 

Answer 2

के लिए अस्पष्टता का उपयोग रंग और पृष्ठभूमि के लिए और नहीं आप अपने वांछित परिणाम के लिए background:rgba संपत्ति का उपयोग कर सकते हैं कि केवल प्रभाव होगा अपने parent नहीं child और parent के लिए भी।

सीएसएस

input#element{ 
    width: 382px; 
    height: 26px; 
    border: 2px solid #000; 
    border-radius: 3px; 
    background:rgba(255,0,0,0.1); 
} 

DEMO

Answer 3

मैं नहीं देखा है कि प्रश्न एक इनपुट तत्व के बारे में था, लेकिन शायद मेरा उत्तर किसी और में मदद मिलेगी, इसलिए यहाँ हम चले।

जैसा कि अन्य पोस्टर ने कहा है, आप अपने पृष्ठभूमि रंग को परिभाषित करने के लिए rgba वाक्यविन्यास का उपयोग कर सकते हैं।

अगर वहाँ एक आप बदलना चाहते हैं में नेस्टेड तत्व हैं, आप भी opacity उन्हें इस सीएसएस के साथ आवेदन कर सकते हैं:

#element > * { 
    opacity:0.8; 
} 

यहाँ एक उदाहरण है: JsFiddle

आप एक चाहते हैं आपके तत्व के लिए पृष्ठभूमि-छवि, मुझे लगता है कि सीमा के साथ एक कंटेनर में इसे लपेटने का सबसे अच्छा तरीका अभी भी है।

Answer 4

अस्पष्टता पृष्ठभूमि नहीं बल्कि सीमा सीएसएस

Demo here

एचटीएमएल

<div id="element"></div> 

सीएसएस

#element{ 
    width: 156px; 
    height: 156px; 
    border: 2px solid #96d5ea; 
    background:rgba(150, 213, 234,1); 
    margin: 35px auto; 
    -webkit-transform: rotate(-45deg); 
    -webkit-transition: all 1s ease; 
} 

#element:hover { 
    background:rgba(150, 213, 234,0); 
    -webkit-transform: rotate(315deg); 
}