क्या हॉवर पर केवल आरजीबीए बैकग्राउंड कलर के अल्फा को बदलना संभव है?

Question

मेरे पास <a>अलग-अलग आरजीबीए बैकग्राउंड रंगों के साथ टैग्स का एक सेट है, लेकिन एक ही अल्फा है। क्या एकल सीएसएस शैली लिखना संभव है जो केवल आरजीबीए विशेषता की अस्पष्टता को बदल देगा?

कोड का एक त्वरित उदाहरण:

 <a href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a href="#"><img src="" /><div class="green">Link 2</div></a> 

और शैलियों

a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

जो मैं करना चाहता हूं वह एक एकल शैली लिखना है जो कि <a>मँडरा जाने पर अस्पष्टता को बदल देगा , फिर भी रंग अपरिवर्तित रखेगा।

कुछ इस तरह

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

Comments

वैसे, आपके divतत्व आपके तत्वों में क्या कर रहे हैं a?

— BoltClock

@BoltClock HTML5 ब्लॉक-स्तरीय aतत्वों को अनुमति देता है ।

— व्यापारी

@mercator: ठीक है। मैंने यह खो दिया।

— BoltClock

@BoltClock यह प्रभाव के लिए कोड करने के लिए सबसे सरल तरीका लग रहा था, एक aटैग के रूप में एक imgपाठ के चारों ओर और दूसरे के विपरीत । तथ्य यह है कि यह HTML 5 द्वारा समर्थित है एक अच्छा बोनस है।

— फायरफ्लाइट

जब यह सवाल पूछा गया - यह सीएसएस के साथ संभव नहीं था। अब यह संभव है - सीएसएस वेरिएबल्स के साथ - जैसा कि मैंने अपने जवाब

— डेनियल

Answer 1

कस्टम गुणों के साथ अब यह संभव है:

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }

a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

यह समझने के लिए कि यह कैसे काम करता है, देखें कि मैं सीएसएस रंग चर में अपारदर्शिता कैसे लागू करूं?

यदि कस्टम गुण विकल्प नहीं हैं, तो नीचे मूल उत्तर देखें।

---

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

a { display: block; position: relative; }

.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }

.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

आप inheritसंपत्ति के मूल्य के रूप में केवल अकेले कीवर्ड का उपयोग कर सकते हैं, और फिर भी यहां उपयोग inheritउचित नहीं है।

Answer 2

यदि आप चाहते हैं तो संख्याओं को हार्ड कोड करने से बचने के लिए आप विभिन्न चीजें कर सकते हैं। इनमें से कुछ विधियां केवल तभी काम करती हैं जब आप एक सादे सफेद पृष्ठभूमि का उपयोग करते हैं क्योंकि वे वास्तव में अस्पष्टता को कम करने के बजाय शीर्ष पर सफेद जोड़ रहे हैं। पहले वाले को हर चीज के लिए ठीक काम करना चाहिए:

• आप पहले से ही किसी चीज़ के लिए पासीडो-तत्व का उपयोग नहीं कर रहे हैं; तथा
• आप टैग positionपर रिश्तेदार या निरपेक्ष पर सेट कर सकते हैं<div>

विकल्प 1: ::beforeप्यूसीडो-तत्व:

.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: सफेद gif ओवरले:

.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: box-shadowविधि:

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;
}

कोड उदाहरण: http://codepen.io/chrisboon27/pen/ACdka

Comments

अच्छा जवाब, धन्यवाद। मुझे तीसरा विकल्प उपयोगी और सरल लगा, अगर मैं इस विधि को उल्टा करता हूं: होवर के बिना कुछ भी अतिरिक्त उपयोग न करें, और होवर उपयोग पर: बॉक्स-शैडो: इनसेट 0 0 0 99999px rgba (128,128,128,0.2)। यह मेरे लिए आवश्यक था क्योंकि मेरी पंक्तियाँ वैकल्पिक रूप से सफ़ेद और हल्के भूरे रंग की होती हैं, इसलिए मूल उत्तर ने श्वेत को नहीं बदला।

— डोवव हेफेट्ज

Answer 3

नहीं, यह संभव नहीं है।

आप एक सीएसएस प्री-प्रोसेसर की कोशिश कर सकते हैं , हालांकि, अगर आप इस तरह का काम करना चाहते हैं।

जो मैं देख सकता था, उसमें से कम से कम LESS और Sass में फ़ंक्शंस हैं जो रंगों को अधिक या कम पारदर्शी बना सकते हैं।

Comments

मैं हमेशा SCSS / LESS के बारे में भूल जाता हूं। हमेशा। शायद मुझे वास्तव में उनका उपयोग करना शुरू करना होगा।

— BoltClock

SCSS में, यह पारदर्शी है ([रंग], 0.8)। देखें sass-lang.com/documentation/Sass/Script/...

— अरियन अकोस्टा

Answer 4

नहीं, यह संभव नहीं है।

यदि आप उपयोग करना चाहते हैं rgba, तो आपको प्रत्येक मान को एक साथ सेट करना होगा। केवल अल्फा को बदलने का कोई तरीका नहीं है।

Answer 5

यह अब 2017 है और अब यह संभव है

सीएसएस कस्टम गुण / सीएसएस चर ( Caniuse )

सीएसएस चर के लिए एक क्लासिक उपयोग मामला एक संपत्ति के मूल्य के कुछ हिस्सों को अलग करने की क्षमता है।

तो यहाँ, पूरे rgba अभिव्यक्ति को एक बार फिर से दोहराने के बजाय - हम अलग हो गए हैं या rgbaमानों को 2 भागों / चर (आरजीबी मूल्य के लिए एक और अल्फा के लिए एक) में 'अलग कर दें'

.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
}

फिर, होवर पर अब हम केवल --alpha वैरिएबल को संशोधित कर सकते हैं:

a:hover .green, a:hover .brown {
  --alpha: 1;
}

a {
  display: block;
  position: relative;
}
.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  display: inline-block;
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
  font-size: 40px;
  margin: 20px;
}

a:hover .green, a:hover .brown {
  --alpha: 1;
}

<a href="#">
  <div class="brown">Link 1</div>
</a>
<a href="#">
  <div class="green">Link 2</div>
</a>

Codepen

आगे की पढाई:

सीएसएस चर (दान विल्सन) के साथ सीएसएस गुणों को अलग करना

Answer 6

एक विकल्प है, आप मूल रंग पर एक रेखीय-ढाल पृष्ठभूमि छवि जोड़ सकते हैं।

a{
  background: green
}
a:hover{
  background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
  background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}

इसके अलावा, css3 फ़िल्टर संपत्ति के साथ, आप भी ऐसा कर सकते हैं, लेकिन ऐसा लगता है कि यह पाठ का रंग बदल देगा

a:hover{
   filter: brightness(80%) //darker
}
a:hover{
   filter: brightness(120%) //lighter
}

यहाँ एक jsfiddle है: https://jsfiddle.net/zhangyu911013/epwyL296/2/

Comments

अब तक मेरे लिए एकमात्र संतोषजनक जवाब।

— आंद्रे एल्रिको

Answer 7

सरल समाधान:

a
{
    position: relative;
    display:inline-block;
    background: rgba(red, 0.75);
    padding: 20px;


   &:before
   {
     content: ' ';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }

   &:hover
   {
     &:before
     {
       background-color: rgba(#000, 0.25); 
     }
   }
}

उदाहरण: https://jsfiddle.net/epwyL296/14/

बस पृष्ठभूमि के अल्फा के साथ खेलते हैं। यदि आप अंधेरे के बजाय प्रकाश चाहते हैं, तो # 000 से # 000 को बदलें

Answer 8

:hoverहोवर वर्ग में एक अलग अपारदर्शिता का उपयोग और निर्दिष्ट क्यों नहीं किया जाता है?

a:hover {
     opacity:0.6
}

Comments

क्योंकि यह पूरे तत्व को प्रभावित करता है।

— BoltClock

SVG ऑब्जेक्ट्स के साथ, इसका उपयोग संभव हैfill-opacity

— Aprillion

न केवल पूरे तत्व, बल्कि सभी बाल तत्व भी।

— डैनियल एफ

Answer 9

मुझे भी ऐसी ही समस्या का समाधान करना पड़ा था। मेरे पास बटन के रूप में काम करने वाले 18 अलग-अलग divs थे, और प्रत्येक एक अलग रंग के साथ। प्रत्येक के लिए रंग कोड का पता लगाने या एक div का उपयोग करने के बजाय: चयन क्षमता को बदलने के लिए चयनकर्ता का चयन करें (जो सभी बच्चों को प्रभावित करता है) मैंने छद्म वर्ग का उपयोग किया था: जैसे @ क्रिस बून के जवाब में।

क्योंकि मैं अलग-अलग तत्वों पर रंग करना चाहता था, इसलिए मैंने इस्तेमाल किया: इससे पहले कि आप पारदर्शी सफेद div बना सकें: hover। यह एक बहुत ही बेसिक वॉशआउट है।

#categories div {
    position:relative;
    width:100px;
    height:100px;
    float:left;
    border:1px solid black;
    display:table-cell;
}

#categories div:before{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
}

#categories div:hover:before {
    background-color:white;
    opacity:0.2;
}

#a_Particular_Div {
    background-color:red;
}

CanIUse.com के अनुसार, 2014 की शुरुआत में 92% समर्थन जैसा कुछ होना चाहिए। ( http://caniuse.com/#feat=css-gencontent )

Answer 10

आप इसे सीएसएस चर के साथ कर सकते हैं, हालांकि यह थोड़ा गड़बड़ है।

सबसे पहले, एक वैरिएबल सेट करें जिसमें केवल RGB मान हों, जिस रंग का आप उपयोग करना चाहते हैं:

:root {
  --color-success-rgb: 80, 184, 60; 
}

फिर आप एक रंग के लिए RGBA मान निर्दिष्ट कर सकते हैं और सब कुछ खींच सकते हैं लेकिन इस चर से अल्फा मान:

.button--success {
  background: rgba(var(--color-success-rgb), 0.8);
}

यह सुपर सुंदर नहीं है, लेकिन यह आपको एक ही RGB मान का उपयोग करने देता है लेकिन एक रंग के लिए अलग-अलग अल्फा मान।

Comments

यह समस्या का एक उचित समाधान है। और, रंग के साथ चर पर होना जरूरी नहीं है :root, यह अपने आधार रंग को निर्धारित करते हुए, तत्व के वर्ग पर हो सकता है। धन्यवाद!

— ब्रैड

Answer 11

अपडेट: दुर्भाग्य से ऐसा करना संभव नहीं है। आपको दो अलग-अलग चयनकर्ताओं को लिखना होगा:

a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}

W3C के अनुसार, rgbaसंपत्ति में inheritमूल्य का समर्थन / समर्थन नहीं है ।

Comments

मुद्दा यह है कि inheritमान्य फ़ंक्शन तर्क नहीं है। आप देखेंगे कि यह किसी भी अन्य सीएसएस फ़ंक्शन के साथ काम नहीं करता है।

— BoltClock

फंक्शन से क्या आपका मतलब ऐसी चीजों से है rgbaऔर transitions? क्योंकि मुझे पता है कि यह काफी कुछ गुणों के साथ समर्थित है।

— अय्यप

हाँ, साथ में url(), attr()आदि भी। inheritकेवल एक संपत्ति का मूल्य है।

— BoltClock

मैं url()पहले से ही इसके बारे में जानता था । मैं सिर्फ 100% यकीन नहीं था rgbaक्योंकि यह रंगों के लिए उपयोग किया जाता है। हालांकि मुझे शिक्षित करने के लिए धन्यवाद :)!

— अय्यप

Answer 12

मैंने इसी तरह की समस्या का सामना किया। यहाँ मैंने क्या किया है और यह only alpha changes on hover and also the text is not affectedनिम्न चरणों द्वारा ठीक काम करता है :

1) जिस भी तत्व की पृष्ठभूमि को आप बदलना चाहते हैं, उस पर प्रकाश डाला (या अपनी पसंद का) वर्ग लागू करें।

2) पृष्ठभूमि रंग rgba प्राप्त करें

3) इसे एक स्ट्रिंग में स्टोर करें और इसे बदल दें (अल्फा बदलें) जैसा कि आप चाहते हैं कि हॉवर पर (माउसेंटर और मूसलीव)

HTML कोड:

<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>

सीएसएस कोड:

.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}

जावास्क्रिप्ट कोड:

$(document).on({

            mouseenter: function() {

            var rgba_str = $(this).css("background-color");
            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";   

                $(this).css("background-color",new_rgba_str ); 
               },

             mouseleave: function(){

                 var rgba_str = $(this).css("background-color");

            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";               
                $(this).css("background-color",new_rgba_str ); 

               }

        },'.highlighted');

वर्किंग फिडल: http://jsfiddle.net/HGHT6/1/

Answer 13

के साथ सरल तरीके को opacityआप में एक मामूली बदलाव को समायोजित कर सकते, तो background-color:

.yourClass {
    // Your style here //
    opacity: 0.9;
}

.yourClass:hover, .yourClass:focus {
    opacity: 0.7;
}

.yourClass:active {
    opacity: 1;
    box-shadow: none;
}

.yourClass:hover, .yourClass:focus, .yourClass:active {
    text-decoration: none;
    outline: none;
}

Answer 14

यह सबसे सरल तरीका है; इसे अपने सीएसएस स्टाइलशीट में रखें:

a:hover { color : #c00; } 

किया हुआ!

Comments

- बस रंग को किसी करीबी से मिलाएं। सभी ब्राउज़रों में अस्पष्टता काम नहीं करती है।

— डॉ। null

आपके उत्तर में एक अच्छी चाल है, लेकिन आपकी टिप्पणी पूरी तरह अप्रासंगिक है।

— बोल्टलॉक