सीएसएस - अज्ञात रंग के साथ होवर पर डार्क

Question

मैं यादृच्छिक रूप से 50x50px के बक्से में रंग उत्पन्न कर रहा हूं और जब मैं उन्हें घुमाता हूं तो मैं उन्हें गहरा बनना चाहता हूं, लेकिन एक ही रंग रहना चाहता हूं।

मैं पारदर्शिता के साथ एक काले रंग के लिए li:hover स्थापित करने की कोशिश की गए

background-color: rgba(91, 91, 91, 0.51) !important; 

लेकिन यह अच्छा नहीं लग रहा है, यह पूरे <li> बना रहा है हॉवर पर पारदर्शी (जो बॉक्स मैं की बात कर रहा हूँ है) ।

मैं इसे कैसे प्राप्त करूं?

Here is a Plunker।

Answer 1

क्षमा करें, केवल अल्फा को बदलना संभव नहीं है। आपको प्रत्येक व्यक्तिगत वर्ग के लिए लाल, हरे और नीले मान निर्दिष्ट करना होगा।

लेकिन वहाँ एक और तरीका है जो यहाँ उत्तर दिया जाता है है और मैं नीचे कॉपी कर देंगे: http://codepen.io/chrisboon27/pen/ACdka

विकल्प 1:: https://stackoverflow.com/a/16910152/1026017

यहाँ एक डेमो है

.before_method{ 
    position:relative; 
} 
.before_method:before{ 
    display:block; 
    content:" "; 
    position:absolute; 
    z-index:-1; 
    background:rgb(18, 176, 41); 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    opacity:0.5; 
} 
.before_method:hover:before{ 
    opacity:1; 
} 

: :: छद्म-तत्व से पहले

विकल्प 2: सफेद गीफ ओवरले:

.image_method{ 
    background-color: rgb(118, 76, 41); 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png) 
} 
.image_method:hover{ 
    background-image:none; 
} 

विकल्प 3: बॉक्स-छाया विधि (gif पद्धति पर भिन्नता - प्रदर्शन मुद्दा हो सकता है):

.shadow_method{ 
    background-color: rgb(18, 176, 41); 
    box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2); 
} 
.shadow_method:hover{ 
    box-shadow:none; 
}