Día 85: CSS Color Keywords
La ruta del desarrollador web frontend autónomo🤹♂️
Esta página explicará las palabras clave
transparent
,currentcolor
yinherit
.
La palabra clave transparent
La palabra clave transparent
se utiliza para hacer que un color sea transparente. Esto se usa a menudo para hacer un color de fondo transparente para un elemento.
Ejemplo:
Aquí, el color de fondo del elemento <div>
será totalmente transparente y la imagen de fondo se mostrará:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
Nota: La palabra clave
transparent
es equivalente argba(0,0,0,0)
. Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad de un color.
La palabra clave currentcolor
La palabra clave currentcolor
es como una variable que contiene el valor actual de la propiedad de color de un elemento.
Esta palabra clave puede ser útil si desea que un color específico sea consistente en un elemento o una página.
Ejemplo:
En este ejemplo, el color del borde del elemento <div>
será azul, porque el color del texto del elemento <div>
es azul:
div {
color: blue;
border: 10px solid currentcolor;
}
Ejemplo:
En este ejemplo, el color de fondo del elemento <div>
se establece en el valor de color actual del elemento body
:
body {
color: purple;
}
div {
background-color: currentcolor;
}
Ejemplo:
En este ejemplo, el color del borde y el color de la sombra de <div>
se establecen en el valor de color actual del elemento body
:
body {
color: green;
}
div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
}
La palabra clave inherit
La palabra clave inherit
especifica que una propiedad debe heredar su valor de su elemento principal.
La palabra clave inherit
se puede utilizar para cualquier propiedad CSS y en cualquier elemento HTML.
Ejemplo:
En este ejemplo, la configuración del borde del elemento <span>
heredará del elemento principal:
div {
border: 2px solid red;
}
span {
border: inherit;
}
Resumen
La palabra clave transparent
se utiliza para hacer que un color sea transparente, currentcolor
es como una variable que contiene el valor actual de la propiedad de color de un elemento y inherit
especifica que una propiedad debe heredar su valor de su elemento principal. Estas palabras clave se pueden utilizar en cualquier propiedad CSS y en cualquier elemento HTML.
Traducido con 💚 desde W3Schools.com