Me gustaría tomar un color de fondo existente de un elemento div y solo ajustar la opacidad ... ¿cómo lo haría?Cómo cambiar la opacidad del color de fondo (no de texto) con javascript?
Encontré una solución muy simple a mi problema; jquery-color requiere plug-in pero es, con mucho, la mejor solución en mi opinión:
$('#div').css('backgroundColor', $.Color({ alpha: value }));
opacidad es complicado porque todavía no hay un mecanismo de multi-navegador compatible, a pesar de que su supone que está en CSS3.
Lo que probablemente desee hacer es cambiar el canal alfa del estilo background-color. Ver: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Alguien ha desarrollado un plugin de jQuery que hace precisamente lo que quiere: http://archive.plugins.jquery.com/project/backOpacity
Con este plugin, puede controlar sólo la "opacidad volver" sin afectar a elementos secundarios.
[Una breve introducción a la opacidad y RGBA] (http: // www. css3.info/introduction-opacity-rgba/). –
Cargue su imagen de fondo o color en Photoshop y disminuya la opacidad allí y guárdela como imagen .jpeg y luego úselo como fondo en HTML.
Tan simple como eso ....: D
JPEG no es ([normalmente] (http://stackoverflow.com/questions/2639866/jpeg-image-with-alpha-channel-on-website)) utilizado con opacidad. Usar imágenes es ineficiente para empezar, pero para el propósito específico de tener opacidad no binaria, diría que PNG es el camino a seguir. –
El plugin query-color es una buena solución, sin embargo Creo firmemente que no lo hace necesidad de sobrecargar su aplicación con plugins innecesarios para tal una forma fácil y sencilla tarea.
Aquí hay otro método que utiliza cadenas:
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);
Aquí es un ejemplo jsFiddle de cómo usarlo.
Tuve un similar problem y me hizo la magia.
si quieres ir de x.xxx opacidad a 1 que puede hacer
var element = $("#id")
element.css('backgroundColor', element.css('backgroundColor').replace(/(\d\.?\d*)\s*\)/i, "1"))
a hacer el inverso sólo cambia 1 por el valor que desee.
Tenga en cuenta su color es necesario tener la "RGBA (100, 100, 100, 0.85098)" formato desde el principio
Usando jQuery UI – Alfabravo