Couleur du background pour du texte

**kill88ma** · 20/10/2014, 16h36

Bonjour,
J'aurais beaucoup de mal a vous expliquer ce que je souhaite effectuer, du coup je vous met des images afin d'illustrer...

Nom : lLoDeGm.png
Affichages : 67
Taille : 324,6 Ko

Nom : lLoDeGm.png
Affichages : 67
Taille : 324,6 Ko

Voici ce que j'ai actuellement, comme vous pouvez le voir la couleur du texte est celle du background mais celle ci est statique.
Je souhaite donc faire en sorte que la couleur de mon texte soit transparente, mais je ne sais pas si cela est possible vus que j'y est mis un background blanc.

Html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<body>
    <nav class="menu">
        <a class="first">bla bla </a>  
        <img class="click" src="css/res/home.png" alt="Smiley face" width="50" height="50">
        <img class="click" src="css/res/brush.png" alt="Smiley face" width="50" height="50">
        <img class="click" src="css/res/mail.png" alt="Smiley face" width="50" height="50">
    </nav>        
</body>

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
body{
    background: url(res/back.jpg); 
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    /*border: 15px solid white;*/
}
nav .click {
    text-align: right;
    vertical-align: center;
    color: #2E2E2E;
    text-decoration: none;
    padding: 0 15px;
    background-image: url(res/back.jpg) ;
    border-radius: 9px ;
    padding: 5px 5px 5px 5px;
    vertical-align: -15px;
}
nav .first {
    text-align: left;
    color: #2E2E2E;
    text-decoration: none;
    color: black;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(transparent, transparent),
             url(res/back.jpg) repeat;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
}

**Muchos** · 20/10/2014, 21h52

COLOR accepte les valeurs transparent ou le modèle RGBA. Bien sûr, les lettres seront "blanches".

Voici un tuto pour mettre un background dans du texte (propriété Webkit puis fallback en SVG).

Sinon, laissez comme ça, c'est très bien

Couleur du background pour du texte

CSS

Discussions similaires

Partager

Partager