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

Question

Comment retourner une image d’arrière-plan à l’aide de CSS ? Est-ce possible ?

CurrentY j’utilise cette image de flèche dans un de en css

Sur : j’ai besoin de retourner cette flèche horizontalement. Je peux faire cela pour faire une autre image de la flèche **, mais** je suis juste curieux de savoir est-ce possible de faire pivoter l’image en CSS pour

Answer 1

Vous pouvez le retourner horizontalement avec CSS...

jsFiddle.

Si vous voulez retourner verticalement au lieu de cela...

Source.

Answer 2

J’ai trouvé j’ai moyen de retourner seulement le fond pas tout élément après avoir vu un indice pour faire basculer dans la réponse d’Alex. Merci alex pour ta réponse

Voir l’exemple ici http://jsfiddle.net/jitendravyas/qngrf/

Answer 3

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

La transformation de la propriété est prise en charge dans Internet Explorer 10, Firefox et Opera. Internet Explorer 9 prend en charge une autre, l'-ms-transform propriété (transformations 2D uniquement). Safari et Chrome alternative, l'-webkit-transform propriété (3D et 2D transforme). Opera supporte les transformations 2D seulement.

C'est une transformation 2D, donc, il faut travailler, avec le fournisseur, les préfixes, sur Chrome, Firefox, Opera, Safari, et IE9+.

D'autres réponses étaient :avant de l'arrêter de se retourner, le contenu intérieur. Je l'utilise sur mon pied de page (à la verticale-miroir l'image de mon header):

HTML:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

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 vous retrouvez retournement de l'élément et ensuite re-feuilletant tous ses enfants. Fonctionne avec les éléments imbriqués, trop.

Answer 4

Pour ce que ça vaut, pour les navigateurs basés sur Gecko, vous ne peut pas conditionner cette chose hors de `` en raison de la vie privée résultante de fuites. Voir http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/