Exemple de code CSS3 pour la production de pages de texte transparent en arrière-plan opacity_css3_CSS_Web

2020-05-08

Récemment rencontré un besoin d'afficher du texte avec un fond translucide sur l'image, l'effet est illustré dans la figure suivante:

Requirement.png

Après avoir vu cette exigence, la première réaction consiste à utiliser l'opacité dans CSS3 pour définir la transparence de l'élément.


 
 

 
     
     
     
      L'arrière-plan est transparent et le texte est également transparent </ title>
     <style>
         * {
             rembourrage: 0;
             marge: 0;
         }

         .container {
             largeur: 600px;
             hauteur: 400px;
             fond: url ('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') no-repeat;
             taille du fond: couverture;
             -webkit-background-size: couverture;
             -o-fond-taille: couverture;
             position de fond: centre 0;
         }

         .demo {
             position: absolue;
             largeur: 260 px;
             hauteur: 60px;
             haut: 260 px;
             hauteur de ligne: 60 px;
             alignement du texte: centre;
             couleur de fond: noir;
             opacité: 0,5;
         }

         .demo p {
             couleur: #FFF;
             taille de police: 18px;
             poids de police: 600;
         }
     </ style>
 </ tête>

 <body>
     <div class = "container">
         <div class = "demo">
             <p> La Coupe du monde 2018 est ouverte: 10 jours </p>
         </div>
     </div>
 </ corps>

 </ html>
 </ pré>
 <br>
 <p> L'effet est le suivant: </p>
 <p style = "text-align: center"> <img alt = "" src = "https://img.xd1998.com/upload/images/sl2gfvvyx2o.jpg" /> </p>
 <p style = "text-align: center"> L'arrière-plan est transparent et le texte est également transparent.png </p>
 <p> Cela semble répondre aux besoins, mais ce n'est pas parfait. Après avoir défini l'opacité, l'élément entier est translucide, ce qui rend le texte flou. Cette solution n'est pas souhaitable.  </p>
 <p> En fait, la méthode CSS transparente n'est pas seulement un moyen de définir l'opacité.  Il existe deux autres types: </p>
 <ul>
     <li> rgba (rouge, vert, bleu, alpha) de css3, la valeur de alpha est de 0 à 1, comme rgba (255,255,255,0.8) </li>
     <li> Filtre spécifique à IE: Alpha (opacité = x), la valeur de x va de 0 à 100, comme filtre: Alpha (opacité = 80) </li>
 </ ul>
 <p> Ici, j'ai utilisé la façon de configurer rgba: </p>
 <br>
 <pre class = "brush: xhtml;">
 <! DOCTYPE html>
 <html lang = "en">

 <head>
     <meta charset = "UTF-8">
     <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
     <meta http-equiv = "X-UA-Compatible" content = "ie = edge">
     <title> Fond transparent, texte opaque </ title>
     <style>
         * {
             rembourrage: 0;
             marge: 0;
         }

         .container {
             largeur: 600px;
             hauteur: 400px;
             fond: url ('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') no-repeat;
             taille du fond: couverture;
             -webkit-background-size: couverture;
             -o-fond-taille: couverture;
             position de fond: centre 0;
         }

         .demo {
             position: absolue;
             largeur: 260 px;
             hauteur: 60px;
             haut: 260 px;
             hauteur de ligne: 60 px;
             alignement du texte: centre;
             couleur de fond: rgba (0,0,0,0,5);
         }

         .demo p {
             couleur: #FFF;taille de police: 18px;
             poids de police: 600;
         }
     </ style>
 </ tête>

 <body>
     <div class = "container">
         <div class = "demo">
             <p> La Coupe du monde 2018 est ouverte: 10 jours </p>
         </div>
     </div>
 </ corps>
 </ html>
 </ pré>
 <br>
 <p> L'effet est le suivant: </p>
 <p style = "text-align: center"> <img alt = "" src = "https://img.xd1998.com/upload/images/k0q5uwg0kll.jpg" /> </p>
 <p style = "text-align: center"> L'arrière-plan est transparent et le texte est opaque.png </p>
 <p> Après ce réglage, le texte semble beaucoup plus clair.  </p>
 <p> <span style = "color: # ff0000"> <strong> Résumé </ strong> </ span> </p>
 <p> En fait, pour atteindre cette exigence, non seulement ce genre de pensée, mais aussi deux DIV peuvent être placés dans la même position, l'un est un DIV translucide de fond, et l'autre est un DIV de texte, ce qui peut résoudre le problème, mais il doit être écrit  Positionnement absolu ou marge négative, et DIV avec un contenu vide, cette méthode apparaîtra légèrement compliquée dans certains scénarios, comme le montre l'exemple suivant, donc dans les scénarios de demande réels, des problèmes spécifiques doivent être analysés.  </p>
 <p style = "text-align: center"> <img alt = "" src = "https://img.xd1998.com/upload/images/c5adwygwgx5.gif" /> </p>
 <p> Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun, et j'espère que tout le monde le soutiendra.  </p>
 Le
 <br>
 <span id = "art_bot" class = "jbTestPos"> </ span>
 <br>
 <br> <! - endmain-></div>
 <link rel="stylesheet" type="text/css" href="js/shCore.css">
<link rel="stylesheet" type="text/css" href="js/shThemeDefault.css">
    <div style="clear: both;"></div>

</div>



<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//count.flyfishcourse.com/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '15']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->


<div id="bottom">www.xd1998.com@2001-2030Partage De Technologie</div>
 
</body>

</html>