Texte transparent

bonjour,

comment faire un texte transparent comme ceci

7 réponses

  1. Il n'y a pas de transparance sur votre exemple
    0
  2. Bonjour
    Vous pouvez ajouter dans votre CSS pour les instructions de votre texte:
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

    Exemple: pour h1

    h1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 7vw;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color:#ffffff; /* #000000=Noir #ffffff=Blanc */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    }


    A+
    0
    1. le texte disparait il ne reste plus que son ombre
      0
      1. Bonjour
        Vous devez adapter la couleur de votre texte à la teinte du fond (image).
        De noir #000000 à Blanc #FFFFFF vous avez quelques millions de nuances.

        Si vous n'êtes pas à l'aise avec les couleurs utilisez http://colorcop.net/download/ (privilégiez la version "stand alone" sans installation...

        A+
        0
        1. voici mon code html/css

          <section class="section1">
                    <img src="img/velo.jpg" alt="velo" style="width: 100%;">
                    <h1 class="titre-velo">LOCATION DE VELO</h1>
              </section>


          .section1{
            margin: 80px 2% 50px;
            position: relative;
            text-align: center;
          }
           
          .titre-velo{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 100px;
            color: white;
            text-shadow: 0 0 30px #000;
            mix-blend-mode: overlay;
          }


          j'ai l'impression que le texte est derriere le vélo et il n'est pas transparant

          sans mix-blend-mode: overlay



          avec mix-blend-mode: overlay

          0
          1. Bonjour
            Désolé, je n'utilise pas "mix-blend-mode"
            A+
            0