Establecer la opacidad sólo para el color de fondo y no en texto usando CSS

Aquí, vamos a aprender cómo Ajuste la opacidad sólo para el color de fondo y no en texto usando CSS?

Introducción:

La opacidad es una característica muy clave cuando se trata de la apariencia de las imágenes y textos y otros elementos. Uno debe ser muy aconsejable utilizar la propiedad de opacidad. La propiedad de opacidad o bien se puede utilizar para mejorar un elemento particular y de usa incorrectamente también puede arruinar la apariencia de su elemento en su sitio web o página web. Aunque, si desea convertirse en un desarrollador bien que necesita aprender sobre tantas propiedades como sea posible y la opacidad es definitivo en esa lista. El uso de opacidad puede ayudar a crear diferentes opciones class la apariencia de su elemento y que también en una forma elegante mucho. Entonces, con esto en mente nota ¿por qué no aprender más sobre esta propiedad en la siguiente sección.

Anécdota:

La propiedad de opacidad se utiliza mayormente para definir o establecer la transparencia de un elemento en su sitio web o una página web. Como se pueden tener en cuenta todos los valor de & nbsp; mentiras de opacidad entre 0,0 a 1,0 , & nbsp; en 0.0 valor representa una gran transparencia y por otro lado el alto valor representa muy baja transparencia. Si desea calcular el porcentaje de opacidad que puede hacer que el uso de una fórmula muy simple que es, & nbsp; Opacidad Opacidad% = 100 * . Ahora, que usted ha aprendido acerca de la opacidad hasta cierto detalle por qué don & rsquo; t que se mueven más allá con el tema y comenzar a discutir cómo podemos establecer la opacidad sólo para el color de fondo y no en el texto mediante CSS.

Método:

Para cambiar la opacidad del color de fondo y no de texto mediante CSS , todo lo que tengo que hacer uso de algún valor y usted será capaz de hacerlo en ningún momento, esos valores son valores RGBA . Ahora, la pregunta viene a la mente que cuando estamos estableciendo la opacidad entonces por qué no estamos usando la propiedad de opacidad? Esta es una pregunta muy apropiada en este contexto y la respuesta a eso es que si se utiliza la opacidad a continuación, el texto dentro de él podría conseguir totalmente transparente.

Sintaxis:

    random{
background:rgba(red, green, blue, alpha);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background: rgb(255, 0, 0, 0.1);
}
.div2 {
background: rgba(255, 0, 0, 0.2);
}
.div3 {
background: rgba(255, 0, 0, 0.3);
}
.div4 {
background: rgba(255, 0, 0, 0.4);
}
.div5 {
background: rgba(255, 0, 0, 0.5);
}
.div6 {
background: rgba(255, 0, 0, 0.6);
}
.div7 {
background: rgba(255, 0, 0, 0.7);
}
.div8 {
background: rgba(255, 0, 0, 0.8);
}
.div9 {
background: rgba(255, 0, 0, 0.9);
}
.div10 {
background: rgba(255, 0, 0, 1.0);
}
</style>
</head>
<body>
<div class="div1">
<p>10% opacity.</p>
</div>
<div class="div2">
<p>20% opacity.</p>
</div>
<div class="div3">
<p>30% opacity.</p>
</div>
<div class="div4">
<p>40% opacity.</p>
</div>
<div class="div5">
<p>50% opacity.</p>
</div>
<div class="div6">
<p>60% opacity.</p>
</div>
<div class="div7">
<p>70% opacity.</p>
</div>
<div class="div8">
<p>80% opacity.</p>
</div>
<div class="div9">
<p>90% opacity.</p>
</div>
<div class="div10">
<p>100% opacity.</p>
</div>
</body>
</html>
</html>

salida

Set the opacity only to background color and not on text using CSS - 4

En el ejemplo anterior, todas por ciento de opacidad se aplica al mismo color.

Más puntos:

Ahora, como usted puede saber que cada color en este valor RGBA define la intensidad de estos colores. El “a” de “RGBA” es una extensión aquí que denota alfa y alfa se utiliza para especificar la opacidad for un color. El valor alfa es similar a la propiedad opacidad y tiene su rango entre 0.0 a 1.0 .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *