Mi piacerebbe prendere un colore di sfondo esistente di un elemento div e solo regolare l'opacità ... come farei?Come cambiare l'opacità del colore di sfondo (non di testo) con javascript?
Trovato soluzione molto semplice al mio problema; richiede jquery-color plug-in, ma è di gran lunga la migliore soluzione, a mio parere:
$('#div').css('backgroundColor', $.Color({ alpha: value }));
opacità è difficile perché non c'è ancora nessuna cross-browser supportato meccanismo, anche se la sua doveva essere in CSS3.
Quello che più probabilmente si vuole è cambiare il canale alfa dello stile background-color. Vedere: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Qualcuno ha sviluppato un plugin jQuery che fa proprio quello che si vuole: http://archive.plugins.jquery.com/project/backOpacity
Con questo plugin, è possibile controllare solo il "opacità di nuovo" senza influenzare gli elementi figlio.
[Una breve introduzione al Opacità e RGBA] (http: // www. css3.info/introduction-opacity-rgba/). –
Carica l'immagine di sfondo o il colore in Photoshop e diminuisci l'opacità e salvalo come immagine .jpeg e utilizzalo come sfondo in HTML.
Semplice come quello ....: D
JPEG non è ([in genere] (http://stackoverflow.com/questions/2639866/jpeg-image-with-alpha-channel-on-website)) utilizzato con l'opacità. Usare le immagini è inefficiente per iniziare, ma per lo scopo specifico di avere opacità non binaria, direi che il PNG è la strada da percorrere. –
Il plugin query-color è una bella soluzione, tuttavia Credo fermamente che si non si bisogno di sovraccaricare la vostra applicazione con i plugin necessari per tale facile e semplice compito.
Ecco un altro approccio con stringhe:
var alpha = "0.8";
var oldBGColor = $('#div').css('backgroundColor');
// rgb(40,40,40)
var newBGColor = oldBGColor.replace('rgb','rgba').replace(')', ','+alpha+')');
// rgba(40,40,40,.8)
$('#div').css('backgroundColor', newBGColor);
Ecco un jsFiddle esempio di come usarlo.
Ho avuto un similar problem e ha reso la magia per me.
se si vuole andare da opacità x.xxx a 1 si può fare
var element = $("#id")
element.css('backgroundColor', element.css('backgroundColor').replace(/(\d\.?\d*)\s*\)/i, "1"))
per fare l'inverso basta cambiare 1 per il valore che si desidera.
Si noti il colore bisogno di avere il "RGBA (100, 100, 100, 0,85,098 mila)" formato dall'inizio
utilizzando jQuery UI – Alfabravo