Comment retourner l’image d’arrière-plan en utilisant CSS?

Comment retourner une image de fond en utilisant CSS? C’est possible?

actuellement j’utilise cette image de flèche dans une background-image d’ background-image de li en css

entrer la description de l'image ici

Sur: visited je dois retourner cette flèche horizontalement. Je peux le faire pour faire une autre image de la flèche MAIS je suis juste curieux de savoir s’il est possible de retourner l’image en CSS pour :visited

    Vous pouvez le retourner horizontalement avec CSS …

     a:visited { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } 

    jsfiddle .

    Si vous voulez retourner verticalement à la place …

     a:visited { -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; } 

    Source

    J’ai trouvé que je ne pouvais retourner que l’arrière-plan, pas tout l’élément, après avoir vu un indice pour retourner la réponse d’Alex. Merci alex pour votre réponse

    HTML

       

    CSS

      .next a, .prev a {width:200px;background:#fff} .next {float:left} .prev {float:right} .prev a:before, .next a:before { content:""; width:16px; height:16px; margin:0 5px 0 0; background:url(http://soffr.miximages.com/css/ah0iN.png) no-repeat 0 0; display:inline-block } .next a:before { margin:0 0 0 5px; transform:scaleX(-1); } 

    Voir exemple ici http://jsfiddle.net/qngrf/807/

    Selon w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

    La propriété transform est prise en charge dans Internet Explorer 10, Firefox et Opera. Internet Explorer 9 prend en charge une alternative, la propriété -ms-transform (transformations 2D uniquement). Safari et Chrome prennent en charge une alternative, la propriété -webkit-transform (transformations 3D et 2D). Opera ne prend en charge que les transformations 2D.

    Il s’agit d’une transformation 2D, elle devrait donc fonctionner avec les préfixes du fournisseur, sur Chrome, Firefox, Opera, Safari et IE9 +.

    Autres réponses utilisées: avant de l’empêcher de retourner le contenu interne. Je l’ai utilisé sur mon pied de https://stackoverflow.com/questions/5768998/how-to-flip-background-image-using-css/page (pour refléter verticalement l’image de mon en-tête):

    HTML:

      

    CSS:

     footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 

    Donc, vous finissez par retourner l’élément et ensuite renvoyer tous ses enfants. Fonctionne avec des éléments nesteds également.

    Pour ce que cela vaut, pour les navigateurs basés sur Gecko, vous ne pouvez pas conditionner cette chose :visited raison des fuites de confidentialité qui en résultent. Voir http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

    Vous pouvez retourner à la fois verticalement et horizontalement en même temps

      -moz-transform: scaleX(-1) scaleY(-1); -o-transform: scaleX(-1) scaleY(-1); -webkit-transform: scaleX(-1) scaleY(-1); transform: scaleX(-1) scaleY(-1); 

    Et avec la propriété de transition , vous pouvez obtenir un flip cool

      -webkit-transition: transform .4s ease-out 0ms; -moz-transition: transform .4s ease-out 0ms; -o-transition: transform .4s ease-out 0ms; transition: transform .4s ease-out 0ms; transition-property: transform; transition-duration: .4s; transition-timing-function: ease-out; transition-delay: 0ms; 

    En fait, il retourne l’élément entier , pas seulement l’ background-image

    FRAGMENT

     function flip(){ var myDiv = document.getElementById('myDiv'); if (myDiv.className == 'myFlipedDiv'){ myDiv.className = ''; }else{ myDiv.className = 'myFlipedDiv'; } } 
     #myDiv{ display:inline-block; width:200px; height:20px; padding:90px; background-color:red; text-align:center; -webkit-transition:transform .4s ease-out 0ms; -moz-transition:transform .4s ease-out 0ms; -o-transition:transform .4s ease-out 0ms; transition:transform .4s ease-out 0ms; transition-property:transform; transition-duration:.4s; transition-timing-function:ease-out; transition-delay:0ms; } .myFlipedDiv{ -moz-transform:scaleX(-1) scaleY(-1); -o-transform:scaleX(-1) scaleY(-1); -webkit-transform:scaleX(-1) scaleY(-1); transform:scaleX(-1) scaleY(-1); } 
     
    Some content here