Afbeelding achtergrond en tekst voor invoer verzenden knop - CSS

Ik probeer een knop te maken voor mijn formulier met een afbeeldingsachtergrond en de tekst boven op de achtergrond. Het lijkt heel eenvoudig, maar ik heb moeite om de tekst te laten verschijnen, ongeacht wat ik probeer en na een uur zoeken te hebben geprobeerd iemand met een soortgelijk probleem te vinden, dus neem aan dat ik iets stoms doe !.

Dit is mijn CSS:

#detail-left .cart-button {
    background : url("../graphics/cart-button.png");
    border : none;
    color : transparent;
    height: 48px;
    width: 118px;
    padding: 10px;
    line-height: 48px;
}

en mijn html:

<input class='cart-button' type='submit' value='Add' />
2

3 antwoord

Kleur verwijderen: transparant. Het maakt het een beetje kleurrijk om je tekst transparant te maken.

3
toegevoegd
Geen probleem. Eigenlijk kan ik mijn antwoord niet indienen door gewoon "Verwijder kleur: transparant" te schrijven, dus het kost tijd om na te denken wat er nog meer te schrijven is om het in te dienen :-)
toegevoegd de auteur SVS, de bron
bedankt, accepteerde het eerder gegeven antwoord.
toegevoegd de auteur Alpaus, de bron

Verwijder color: transparent; uit je stijlklasse, dat zou moeten werken

#detail-left .cart-button {
    background : url("../graphics/cart-button.png");
    border : none;
    height: 48px;
    width: 118px;
    padding: 10px;
    line-height: 48px;
}

Try this working fiddle

2
toegevoegd
Bedankt, dit heeft de truc gedaan. Ik had in elk geval gelijk over één ding - stompzinnigheid!
toegevoegd de auteur Alpaus, de bron

De "kleur: transparant;" instelling zorgt ervoor dat de tekst volledig transparant is, als u wilt dat de tekst halftransparant is, overweeg dan om rgba te gebruiken.

2
toegevoegd
bedankt, accepteerde het eerder gegeven antwoord.
toegevoegd de auteur Alpaus, de bron