siglas - selector rgba css
¿Es posible cambiar solo el alfa de un color de fondo rgba en el vuelo estacionario? (13)
Tengo un conjunto de etiquetas <a> con diferentes colores de fondo de rgba pero el mismo alfa. ¿Es posible escribir un estilo CSS único que cambie solo la opacidad del atributo rgba?
Un ejemplo rápido del código:
<a href="#"><img src="" /><div class="brown">Link 1</div></a>
<a href="#"><img src="" /><div class="green">Link 2</div></a>
Y los estilos
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);}
Lo que me gustaría hacer es escribir un único estilo que cambiaría la opacidad cuando el <a> está sobrevolado, pero manteniendo el color sin cambios.
Algo como
a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
¿Por qué no utilizar :hover y especifique una opacidad diferente en la clase de vuelo estacionario?
a:hover {
opacity:0.6
}
Ahora es 2017 y esto ahora es posible con
Propiedades personalizadas CSS / Variables CSS ( Caniuse )
Un caso de uso clásico para las variables CSS es la capacidad de individualizar partes del valor de una propiedad.
Entonces, aquí, en lugar de repetir toda la expresión de rgba una vez más, dividimos o ''individualizamos'' los valores de rgba en 2 partes / variables (una para el valor de rgb y otra para el alfa)
.brown {
--rgb: 118, 76, 41;
}
.green {
--rgb: 51, 91, 11;
}
.brown, .green {
--alpha: 0.3;
background-color: rgba(var(--rgb), var(--alpha));
}
Luego, al pasar el cursor, ahora podemos modificar la variable --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
Otras lecturas:
Individualización de propiedades CSS con variables CSS (Dan Wilson)
Enfrenté un problema similar. Esto es lo que hice y funciona bien ( only alpha changes on hover and also the text is not affected ) por los siguientes pasos:
1) Aplique una clase resaltada (o cualquiera de su elección) a cualquier elemento que desee cambiar alfa de fondo.
2) Obtener el color de fondo rgba
3) Almacénelo en una cadena y manipúlelo (cambie alfa) como desee al pasar el mouse (mouseenter y mouseleave)
Código HTML:
<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>
Código CSS:
.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}
Código Javascript:
$(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'');
Fiddle de trabajo: http://jsfiddle.net/HGHT6/1/
Esta es la forma más simple; pon esto en tu hoja de estilo css:
a:hover { color : #c00; }
¡hecho!
Esto ahora es posible con propiedades personalizadas:
.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); }
Para entender cómo funciona esto, vea ¿Cómo aplico la opacidad a una variable de color CSS?
Si las propiedades personalizadas no son una opción, consulte la respuesta original a continuación.
Lamentablemente, no, tendrá que especificar los valores rojo, verde y azul nuevamente para cada clase individual:
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); }
Solo puede usar la palabra clave inherit como valor de la propiedad, e incluso entonces el uso de inherit no es apropiado aquí.
No, eso no es posible.
Si desea usar rgba , debe establecer cada valor en conjunto. No hay forma de cambiar solo el alfa.
No, no es posible.
Sin embargo, podrías probar un preprocesador CSS si quieres hacer este tipo de cosas.
Por lo que pude ver, al menos LESS y Sass tienen funciones que pueden hacer que los colores sean más o menos transparentes.
Podrías hacer varias cosas para evitar tener que codificar los números si quieres. Algunos de estos métodos solo funcionan si usa un fondo blanco normal, ya que realmente están agregando blanco en la parte superior en lugar de reducir la opacidad. El primero debería funcionar bien para todo lo proporcionado:
- usted no está usando el elemento psuedo para algo; y
- puede establecer la
positioncomo relativa o absoluta en la etiqueta<div>
Opción 1: ::before del elemento psuedo:
.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;
}
Opción 2: superposición gif blanco:
.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;
}
Opción 3: método de box-shadow :
Una variación del método gif, pero puede tener problemas de rendimiento.
.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;
}
Ejemplos de CodePen: http://codepen.io/chrisboon27/pen/ACdka
Puedes hacer esto con variables de CSS, aunque es un poco desordenado.
Primero, configure una variable que contenga solo los valores RGB, en orden, del color que desea usar:
:root {
--color-success-rgb: 80, 184, 60;
}
Luego puede asignar un valor RGBA para un color y extraer todo menos el valor alfa de esta variable:
.button--success {
background: rgba(var(--color-success-rgb), 0.8);
}
Esto no es súper bonito, pero le permite usar los mismos valores RGB pero diferentes valores alfa para un color.
Solución simple :
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);
}
}
}
ejemplo: https://jsfiddle.net/epwyL296/14/
solo juega con alfa de fondo. si quieres luz en lugar de oscuridad, simplemente reemplaza # 000 por #fff
Tuve un problema similar. Tenía 18 divs diferentes que funcionaban como botones, y cada uno con un color diferente. En lugar de descubrir los códigos de color para cada uno o usar un selector div: hover para cambiar la opacidad (que afecta a todos los niños) utilicé la pseudoclase: antes como en la respuesta de @Chris Boon.
Como quería colorear los elementos individuales, utilicé: antes para crear un div blanco transparente on: hover. Este es un lavado muy básico.
#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;
}
Según CanIUse.com, esto debería tener algo así como un 92% de soporte a principios de 2014. ( http://caniuse.com/#feat=css-gencontent )
hay una alternativa, puede agregar una imagen de fondo de degradado lineal en el color original.
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
}
Además, con la propiedad de filtro css3, puede hacerlo también, pero parece que cambiará el color del texto
a:hover{
filter: brightness(80%) //darker
}
a:hover{
filter: brightness(120%) //lighter
}
aquí hay un jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/
Actualización: no es posible hacerlo por desgracia. Tendrá que escribir dos selectores separados de:
a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}
Según el W3C, la propiedad rgba no tiene / admite el valor inherit .