如何使用CSS翻转背景图像？

Question

如何使用CSS翻转任何背景图像？有可能吗？

当前我在css的background-image li中使用此箭头图片

开：visited我需要水平翻转此箭头。我可以这样做另一个箭头图像但是我只是想知道是否可以在CSS中翻转图像:visited

Answer 1

你可以用CSS水平翻转它......

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

jsFiddle

如果你想垂直翻转......

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

Source

Answer 2

我发现在看到亚历克斯的答案中有一条线索翻转后，我只能翻转背景而不是整个元素。谢谢亚历克斯的答案

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

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://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

请参阅此处示例http://jsfiddle.net/qngrf/807/

Answer 3

根据w3schools： http://www.w3schools.com/cssref/css3_pr_transform.asp

  

Internet Explorer 10，Firefox和Opera支持transform属性。   Internet Explorer 9支持替代的-ms-transform属性（仅限2D变换）。   Safari和Chrome支持另一种-webkit-transform属性（3D和2D变换）。   Opera仅支持2D变换。

这是一个2D转换，因此它应该与Chrome，Firefox，Opera，Safari和IE9 +一起使用供应商前缀。

使用的其他答案：之前阻止它翻转内部内容。我在我的页脚上使用了这个（垂直镜像我标题中的图像）：

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);
}

所以你最终会翻转元素，然后重新翻转所有孩子。也适用于嵌套元素。

Answer 4

对于它的价值，对于基于Gecko的浏览器，由于产生的隐私泄漏，您无法从:visited中解决此问题。见http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/