Utiliser CSS pour faire des background-image au-dessus d'arrière-plan-couleur dans une liste

C'est le code

<ul>
    <li class="test">
         <a href="#">
            <h2>Blah</h2>
            <p>Blah Blah Blah</p>
         </a>
    </li>
</ul>

Fondamentalement, ma liste a déjà de style, par exemple, j'ai mis la couleur d'arrière-plan pour elle.

Maintenant dans la classe "test", j'ai aussi mis une image de fond d'écran.

Ma question est que je veux faire, en arrière-plan de l'image reste au-dessus de la couleur d'arrière-plan et je ne sais pas comment atteindre cet objectif. J'ai essayé avec les z-index, mais je pense qu'il n'est pas applicable pour l'image de fond d'écran.

Veuillez jeter un oeil à l'image

Utiliser CSS pour faire des background-image au-dessus d'arrière-plan-couleur dans une liste

Edit: C'est le Code CSS

Par exemple, c'est le style de ma liste

#sidebar ul li{  
    background:#ccf;
}

Et c'est le style de la classe de test

.test{
    background-image: url('img/big_tick.png');
    background-repeat:no-repeat;
    background-position: bottom right;
    -moz-background-size: 30%;
    -webkit-background-size: 30%;
    background-size: 30%;    
    margin-right: 30px;
}
InformationsquelleAutor user826224 | 2011-12-13
  1. 5

    Ajouter le !important attribut à votre background-image. Comme ceci:

    .test a{
background-image: url('img/big_tick.png') !important;
background-repeat:no-repeat;
background-position: bottom right;
-moz-background-size: 30%;
-webkit-background-size: 30%;
background-size: 30%;    
margin-right: 30px;

    }

    J'ai un exemple de violon ici

    EDIT: j'ai modifié la classe de .test a afin de refléter le style de régime

    • J'ai essayé de mettre la !important, mais il reste encore derrière la couleur d'arrière-plan. @alpa j'ai essayé de modifier l'arrière-plan de couleur d'arrière-plan, mais il ne marche pas encore. Pour la liste, j'ai suivi ce tutoriel à partir de Nettuts [lien]net.tutsplus.com/tutorials/html-css-techniques/... Vous pouvez prendre un coup d'oeil sur le lien pour en savoir plus sur le CSS pour la liste Merci de m'aider!
    • Quel navigateur utilisez-vous? Le !important drapeau de travail en Chrome et IE, c'est ici. Si vous publiez plus de votre style de la liste, qui pourrait être utile.
    • Salut, Im test de ce FF 8.0 et Chrome 16, et je suis toujours confronté au problème. Le style de la liste qui est dans le lien net.tutsplus.com/tutorials/html-css-techniques/.... Merci de m'aider 🙂
    • Je vois maintenant! Le problème vient du fait que le fond est situé dans un. Voici un travail de violon: jsfiddle.net/LHmfT/11 et j'ai mis à jour ma réponse à refléter le correctif. Permettez-moi de savoir comment il fonctionne. 🙂
    • Merci beaucoup! Il fonctionne parfaitement maintenant. Je suis tellement stupide, réglage de l'arrière-plan pour les différents éléments T__T, encore une fois je vous remercie beaucoup!
    InformationsquelleAutor piebie
  2. 4

    Essayer: ajout de la spécificité de l' .la classe de test: #sidebar ul li.test

    Ou, mieux encore, si c'est possible, ajouter background-color à l' .la classe de test, et de se débarrasser de l'élément sélecteur complètement.

    Je voudrais éviter de l'aide !important, sauf si vous avez absolument besoin. Dans le long terme, il vous permettra de faire le montage de votre css de la douleur. Au lieu d'utiliser !important, je suggère d'apprentissage sur la spécificité: http://reference.sitepoint.com/css/inheritancecascade

    • Cela modifie uniquement la position de l'image de fond mais ce n'est pas de rester au-dessus de la couleur d'arrière-plan
    • Essayez: ajout de la spécificité de la classe de test: #sidebar ul li.test Ou, mieux encore, si c'est possible, ajouter de la couleur d'arrière-plan de la classe de test, et obtenir rouge du sélecteur d'élément tout à fait.
    InformationsquelleAutor shaunsantacruz