Colección de citas famosas - Slogan de motivación - Cómo utilizar la propiedad de opacidad de CSS

Cómo utilizar la propiedad de opacidad de CSS

El atributo de opacidad se utiliza para establecer la opacidad de los elementos. Establece un estado 100% opaco en cada elemento, pero puede mostrar la transparencia de los elementos cambiando el valor de opacidad. Presentará en detalle el uso del atributo de opacidad en CSS.

Cómo usar el atributo de opacidad

Se describe a continuación

opacidad: valor en la parte de valor, puedes usar un valor numérico de 0.0 a 1.0 para especificar la opacidad. Cuanto mayor sea el número, mayor será la opacidad y más clara será la visualización. Por el contrario, cuanto menor sea el número, menor será la opacidad y la apariencia borrosa. Además, si ingresa heredar como valor, se hereda el valor del elemento principal.

Incluso si lo configuras fuera del rango de 0,0 a 1,0, puedes aplicarlo dentro de este rango (por ejemplo: -1 → 0/2 → 1 Establecer la opacidad en 0 lo hace completamente transparente). y desaparece de la pantalla.

Cuando la opacidad se establece en 1, se vuelve completamente opaco. (Valor inicial)

A continuación veamos un ejemplo específico del atributo de opacidad

Cuando el valor es un punto decimal

El código es el siguiente

código HTML

< body>

Cuando el valor es decimal

Código CSS

div {background-color:#b0e0e6 }

p {opacidad: 0.5; } aquí, ingresamos texto en el párrafo

en el área

, configuramos el color de fondo en #b0e0e6 y establecemos el valor de opacidad

en 0.5.

El efecto de visualización en el navegador es el siguiente:

La opacidad de la parte del carácter del párrafo ha sido cambiada, parece ligeramente transparente. Además, la opacidad del color de fondo no cambia ya que no se establece ninguna opacidad en el área

.

Cuando el valor es 0 o 1

El código es el siguiente

Código HTML

< p class="text1">Cuando el valor del atributo es 0

Cuando el valor del atributo es 1

CSS código

div {color de fondo:#b0e0e6 }

p.text1 {opacidad:0 }

p.text2 {opacidad:1 } en El efecto de visualización en el navegador es el siguiente

El texto de la primera línea es completamente transparente y, por lo tanto, no se mostrará en la página. El texto de la segunda línea se muestra tal cual porque está completamente. opaco.

Dado que 1 es el valor inicial, si no se especifica ninguna opacidad en el elemento principal, su opacidad no cambia.

Echemos un vistazo a cómo configurar la opacidad de la imagen usando el atributo de opacidad

Veamos directamente el código

Código HTML

Gxlcms

Cómo utilizar el atributo de opacidad

CSS código

.cover {

imagen-de fondo:url("img/tupian.jpg");

ancho: 100%;

posición: relativa;

desbordamiento: oculto;

posición-fondo: centro;

tamaño-fondo: portada;

background- repetir: no-repeat;

}El efecto de visualización en el navegador es el siguiente

Cuando el valor del atributo de opacidad es 1, la visualización de la imagen no cambiará, no mucho aquí Dicho.

Cuando el valor del atributo de opacidad es 0,5, el código CSS es el siguiente

.cover {

background-image:url("img/tupian.jpg ");

ancho: 100%;

posición: relativa;

desbordamiento: oculto;

posición-fondo: centro;

tamaño de fondo: portada;

repetición de fondo: no repetición;

opacidad: 0,5;

}El efecto es de la siguiente manera

Cuando el valor del atributo de opacidad es 0,2, se volverá más borroso y el efecto es el siguiente

上篇: 下篇: Plan de implementación "Tres conocimientos y un ascenso" de 2019 para esforzarse por crear una agencia de cinco tipos