क्या CSS3 बॉक्स-छाया में पारदर्शिता सेट करना संभव है?

Question

क्या बॉक्स छाया पर पारदर्शिता स्थापित करना संभव है?

यह मेरा कोड है:

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;

Answer 1

मुझे लगता है rgba()कि यहां काम होगा। आखिरकार, ब्राउज़र दोनों के लिए समर्थन करता है box-shadowऔर rgba()लगभग समान है।

/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background-color: red;
    margin: 10px;
}

div.a {
  box-shadow: 10px 10px 10px #000;
}

div.b {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>

Comments

मेरे लिए काम किया और उस बड़ी समस्या को हल कर दिया कि रंग-आधारित छायाएं केवल किसी दिए गए बैकग्राउंड के लिए काम करती हैं, इसलिए आपको उन्हें इस बात पर निर्भर करने की आवश्यकता है कि वे उस पर निर्भर होंगे जो अक्सर संभव नहीं होता है (एक डिव जो एक फोटो और सफेद दोनों को कवर करता है bg, जिस स्थिति में छाया फोटो के ऊपर पीला दिखता है)

— jerclarke

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

— क्लारस डिग्नस

आरजीबीए () मेरे लिए काम नहीं करता है, अगर मैं क्रोम को बदलना चाहता हूंinput:-webkit-autofill

— शमूएल

यह हमेशा क्रोम है, है ना।

— BoltClock

@ क्रिस K .: मुझे डर है कि आप मूल बॉक्स-शैडो घोषणा से अलग से ऐसा नहीं कर पाएंगे। निकटतम आप आरजीबीए () और सीएसएस चर के साथ हो सकते हैं, लेकिन इसका मतलब है कि नामित रंगों के लिए कोई समर्थन नहीं है, और आपको बॉक्स-शैडो घोषणा के लिए चर को लागू करना होगा। पृष्ठभूमि-रंग की एक समान सीमा है, यहां कवर किया गया है । यह भी देखें stackoverflow.com/questions/40010597/...

— BoltClock