jQuery ustawia krycie tła CSS


Mam
& < div & >
, którego przezroczystość jest jego

kolor tła

(nie jego zawartość) Chciałbym zmienić. Pilot API wysyła mi ten kolor: 
#abcdef

i mówię jQuery (1.9), aby zastosował ten kolor przez
.css
: 
$('div').css('background-color', '#abcdef');

Wynikowy element div ma styl
background-color
, a nie
#abcdef
, ale raczej jego reprezentację RGB tego samego koloru. 
background-color: rgb(171, 205, 239);

(Tylko obserwacja, a nie część problemu)
Wymóg projektu został zmieniony w taki sposób, że teraz będę musiał również zmienić krycie tła, aby ustawić procent (50%). Dlatego moim pożądanym atrybutem jest
background-color
background-color: rgba(171, 205, 239, 0.5);

jednak nie mogę znaleźć sposobu na ustawienie tego atrybutu koloru tła za pomocą tylko jQuery, kodu szesnastkowego koloru i nadal stosuję wartość Alpha.
krycie
wpływa na zawartość div, jak również na tło, więc nie jest to opcja ... 
$('div').css('background-color', '#abcdef')

 .css('opacity', 0.5);// undesirable opacity changes to div's content

Biorąc pod uwagę wiersz
#abcdef
, czy to możliwe

tylko

obliczając (jak hex2dec), że byłbym w stanie zastosować krycie tła do elementu div, gdybym otrzymał tylko ciąg szesnastkowy koloru?
2021-03-02 Dodaj komentarz
Udostępnij to

Nie znaleziono powiązanych wyników

    Zaproszony:
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    spróbuj
    parseInt (hex, 16)
    , aby przekonwertować ciąg na dziesiętną liczbę szesnastkową int
    więc w tym przypadku byłoby to: 
    var color = '#abcdef';
    
var rgbaCol = 'rgba(' + parseInt(color.slice(-6,-4),16)
    
 + ',' + parseInt(color.slice(-4,-2),16)
    
 + ',' + parseInt(color.slice(-2),16)
    
 +',0.5)';
    
$('div').css('background-color', rgbaCol)

    musisz stworzyć z tego funkcję do użycia w swojej aplikacji.
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Możesz tego spróbować 
    function convertHex(hex,opacity){
    
 hex = hex.replace('#','');
    
 r = parseInt(hex.substring(0,2), 16);
    
 g = parseInt(hex.substring(2,4), 16);
    
 b = parseInt(hex.substring(4,6), 16);
    
 result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
    
 return resu<
    
}$('h1').css('background', convertHex('#A7D136', 0.5));

    Oto przykład.
    http://jsfiddle.net/Ubp2D/
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Możesz użyć tej funkcji pomocniczej javascript 
    function setColorOpacity(colorStr, opacity) {
    
 if(colorStr.indexOf("rgb(") == 0)
    
 {
    
 var rgbaCol = colorStr.replace("rgb(", "rgba(");
    
 rgbaCol = rgbaCol.replace(")", ", "+opacity+")");
    
 return rgbaCol;
    
 } if(colorStr.indexOf("rgba(") == 0)
    
 {
    
 var rgbaCol = colorStr.substr(0, colorStr.lastIndexOf(",")+1) + opacity + ")";
    
 return rgbaCol;
    
 } if(colorStr.length == 6)
    
 colorStr = "#" + colorStr; if(colorStr.indexOf("#") == 0)
    
 {
    
 var rgbaCol = 'rgba(' + parseInt(colorStr.slice(-6, -4), 16)
    
 + ',' + parseInt(colorStr.slice(-4, -2), 16)
    
 + ',' + parseInt(colorStr.slice(-2), 16)
    
 + ','+opacity+')';
    
 return rgbaCol;
    
 }
    
 return colorStr;
    
}
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    To powinno działać dla Ciebie.
    To naprawdę zakłada, że ​​przekazujesz prawidłowy 6-cyfrowy kod szesnastkowy i nieprzezroczystość, i nie sprawdza błędów. 
    function hex2rgba(hex, opacity)
    
{
    
//extract the two hexadecimal digits for each color
    
 var patt =/^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
    
 var matches = patt.exec(hex);//convert them to decimal
    
 var r = parseInt(matches[1], 16);
    
 var g = parseInt(matches[2], 16);
    
 var b = parseInt(matches[3], 16);//create rgba string
    
 var rgba = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";//return rgba colour
    
 return rgba;
    
}$(".box").css("background-color", hex2rgba("#ABCDEF", 0.6));

    Możesz zobaczyć przykład tego na

    jsFiddle tutaj
    http://jsfiddle.net/cxAaU/
    2021-03-02 0 0
    Udostępnij to
    Dlaczego jest złożony? 0 odpowiedzi zostało zwiniętych

    Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

    Polityka prywatności: https://zweryfikowac.pl/Polityka-prywatnosci.pdf
    Copyright © 2023, All Rights Reserved