Image png transparente en arrière-plan de l'image

Je vais avoir quelques problèmes lors de l'utilisation d'une image au format PNG transparent comme une image d'arrière-plan via CSS.

C'est ce que j'obtiens: http://i.imgur.com/EtzMh.png

Et voici mon code CSS:

#userBar {
    background-color: transparent;
    background-image: url('../img/userbarbg.png');
    background-position: bottom;
    background-repeat: repeat-x;
    float: left;
    height: 36px;
    margin-top: 10px;
    width: 100%;
    box-shadow: 0 0 5px #888;
}

Je fais quelque chose de mal?

  • Quel est le problème? Les frontières? Appliquer border-radius pour résoudre le problème, par exemple. border-radius:5px;. Si box-shadow est pris en charge, aussi border-radius.
  • Eh bien... c'png angles doivent être transparentes par les leurs, mais ils sont en noir à la place :S
  • vous savez que vous pouvez faire: background: #000 url(someImage.jpg) no-repeat 20px 20px , où la première 20px est "gauche" et la prochaine est 'top' background-position? 🙂
  • Merci, non je ne le savais pas, mais j'apprécie ton conseil 🙂
InformationsquelleAutor siannone | 2011-12-09
  1. 1

    Vous voyez le box-shadow derrière l'image d'arrière-plan. L'élément est toujours une boîte rectangulaire autant que le navigateur est concernée, de sorte que la forme rectangulaire est ce qu'il utilise pour générer de l'ombre. Vous aurez besoin de spécifier un border-radius (y compris les différents préfixes de navigateur, -webkit-, -moz-, -o-, etc.) qui correspond à celui des coins de votre arrière-plan transparent de sorte que l'ombre aura la même forme que le contenu qu'il y a derrière.

    • Merci 🙂 je pensais qu'il y avait quelque chose de mal avec les images.
    InformationsquelleAutor Noah Witherspoon