Dégradé sur une image en CSS

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Schwarzer Stern, 26 Mars 2015.

  1. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    643
    J'aime reçus:
    2
    Bonsoir,
    petite question de CSS : je souhaite utiliser le code ci-dessous pour "dégrader" le bas d'une image vers le blanc.
    Code:
    background:linear-gradient(to top,  #fff 0%,transparent 5%),url(/photo.jpg)
    Problème : si l'image ne chargeait pas, j'aimerais qu'à la place s'affiche une couleur sombre (car du texte clair est présent). J'ai essayé de remplacer "transparent" par une couleur, mais du coup l'image passe au second plan. J'ai essayé d'inverser les deux parties du background, mais du coup l'image recouvre entièrement le dégradé…

    La seule solution que j'ai trouvée est d'ajouter un bloc de couleur (ce n'est pas raciste) derrière le bloc affecté par ce CSS, mais je me demande s'il n'y pas plus élégant ?

    Merci !
     
  2. p0k3
    p0k3 WRInaute occasionnel
    Inscrit:
    2 Juin 2010
    Messages:
    315
    J'aime reçus:
    0
  3. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    643
    J'aime reçus:
    2
    Je pense que c'est plus ou moins la solution que j'ai déjà imaginée ("bloc de couleur derrière bloc affecté"), mais pour être plus précis je me demandais si ce n'était pas possible de modifier tout simplement le "background" en css, en ajoutant peut-être une 3e valeur quelque part ?
    Sinon j'ajouterai ce bloc, c'est pas pour ce que ça coûte…
    Merci quand même pour la réponse, désolé si je n'ai pas été clair
     
Chargement...
Similar Threads - Dégradé image CSS Forum Date
Score GTmetrix fortement dégradé Demandes d'avis et de conseils sur vos sites 22 Avril 2015
Créer bordure avec ombre portée (dégradé) Développement d'un site Web ou d'une appli mobile 13 Novembre 2014
Google Panda : le mauvais contenu dégrade le site, et le bon le fait remonter ? Référencement Google 12 Août 2011
référencement image sur imgbox, Imgur Débuter en référencement 8 Novembre 2021
Duplicate images pour déclinaisons de produits Débuter en référencement 20 Octobre 2021
Référencement - nom des fichiers images Débuter en référencement 22 Septembre 2021
URL image située sur un autre site ou sous-domaine YouTube, Google Images et Google Maps 17 Septembre 2021
Comment accélérer chargement d'une image ? Développement d'un site Web ou d'une appli mobile 4 Septembre 2021
WordPress Actualiser le titre d'une image référencée par mes domaines référents Netlinking, backlinks, liens et redirections 3 Août 2021
faut-il activer les URL image ou éviter pour économiser le crawl Référencement Google 21 Juin 2021