Comment utiliser la propriété opacité de CSS-tutoriel CSS-php.cn

Comment utiliser la propriété opacité de CSS

不言

Libérer： 2018-12-12 09:13:57

original

6126 Les gens l'ont consulté

L'attribut Comment utiliser la propriété opacité de CSS est utilisé pour définir l'opacité des éléments. Il établit un état 100% opaque sur chaque élément, mais il peut afficher la transparence des éléments en changeant la valeur d'opacité, dans ce prochain. Dans cet article, nous présenterons en détail l'utilisation de l'attribut Comment utiliser la propriété opacité de CSS en CSS.

Comment utiliser la propriété opacité de CSS

L'utilisation de l'attribut d'opacité

est décrite comme suit

Comment utiliser la propriété opacité de CSS:值;

Copier après la connexion

dans le section valeur , vous pouvez spécifier l'opacité en utilisant une valeur comprise entre 0,0 et 1,0. Plus le nombre est grand, plus l'opacité est élevée et plus l'affichage est clair. Au contraire, plus le nombre est petit, plus l’opacité et l’aspect flou sont faibles. De plus, si vous entrez hériter pour valeur, la valeur de l'élément parent est héritée.

Même si vous le définissez en dehors de la plage de 0,0 à 1,0, il peut être appliqué dans cette plage (par exemple : -1→ 0/2 →1) Réglez l'opacité sur 0 pour le rendre entièrement transparent, et disparaît de l'écran.
Lorsque l'opacité est réglée sur 1, elle devient totalement opaque. (Valeur initiale)

Regardons ensuite un exemple spécifique de l'attribut d'opacité

Lorsque la valeur est un point décimal

Le code est le suivant

Code HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div>
      <p>当值是小数的情况下</p>
    </div>
  </body>
</html>

Copier après la connexion

Code CSS

div {background-color:#b0e0e6; }
p {Comment utiliser la propriété opacité de CSS:0.5; }

Copier après la connexion

Ici nous avons le saisissez le texte dans le paragraphe, définissez la couleur d'arrière-plan sur #b0e0e6 et définissez la valeur d'opacité de

ressemble à ceci sur le navigateur :

L'opacité de la partie caractère du paragraphe a changé et elle apparaît légèrement transparente. De plus, l'opacité de la couleur d'arrière-plan n'est pas modifiée puisqu'aucune opacité n'est définie dans la zone

Comment utiliser la propriété opacité de CSS

Lorsque la valeur est 0 ou 1

Le code est le suivant

Code HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div>
      <p class="text1">当属性值是0的时候</p>
    </div>
    <div>
      <p class="text2">当属性值是1的时候</p>
    </div>
  </body>
</html>

Copier après la connexion

Code CSS

div {background-color:#b0e0e6; }
p.text1 {Comment utiliser la propriété opacité de CSS:0; }
p.text2 {Comment utiliser la propriété opacité de CSS:1; }

Copier après la connexion

L'effet d'affichage sur le navigateur est le suivant

La première ligne de texte est complètement transparente, elle ne sera donc pas affichée sur la page, et le second Le texte sur la ligne apparaît tel quel car complètement opaque.
Puisque 1 est la valeur initiale, si aucune opacité n'est spécifiée dans l'élément parent, son opacité est inchangée.

Comment utiliser la propriété opacité de CSS

Jetons un coup d'oeilUtilisez l'attribut Comment utiliser la propriété opacité de CSS pour définir l'opacité de l'image

Regardons le code directement

Code HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div class="cover">
      <h2 class="cover-title">
        <span class="inline">
          <i class="fa fa-code fa-l"></i>
          php中文网</span>
      </h2>
      <p class="cover-caption">Comment utiliser la propriété opacité de CSS属性的使用方法</p>
    </div>
  </body>
</html>

Copier après la connexion

Code CSS

.cover {
  background-image:url("img/tupian.jpg");
  width: 100%;
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Copier après la connexion

L'effet d'affichage sur le navigateur est le suivant

Comment utiliser la propriété opacité de CSS

Lorsque la valeur de l'attribut d'opacité est de 1, l'affichage de l'image ne changera pas, je n'entrerai donc pas dans les détails ici.

Lorsque la valeur de l'attribut opaque est de 0,5, le code CSS est le suivant

.cover {
  background-image:url("img/tupian.jpg");
  width: 100%;
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  Comment utiliser la propriété opacité de CSS: 0.5;
}

Copier après la connexion

L'effet est le suivant

Comment utiliser la propriété opacité de CSS