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

Question

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

目前我在CSS中使用箭头图像作为li的background-image。

在:visited中，我需要水平翻转这个箭头。我可以制作另一张箭头图片来实现这个效果，但是我只是好奇是否可以使用CSS来翻转图像。

- Jitendra Vyas

---

好问题！这可以在许多不同的情况下派上用场。 - AshBrad

@AshBrad - 感谢您的评论。是的，在许多情况下这可能会很有用。 - Jitendra Vyas

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

来源。

- alex

---

如果我只考虑 Web-kit 浏览器，那么仅使用“-webkit-transform: scaleX(-1);”就足够了吗？ - Jitendra Vyas

@alex - 这里有一个问题。它也翻转了 <a> 标签内的文本，但我只想翻转背景图像。你所提供的代码是将整个元素翻转。 - Jitendra Vyas

看起来你不能只是简单地翻转背景图片。不过，你可以将图标放在一个 span 元素中，然后翻转它。 - alex

@alex - 好的，如果我使用这段代码<li><a href="#"><span>text</span></a></li>，它也会翻转文本，那么相对于您给出的代码，如何将文本翻转回来，以便我可以在CSS中编写反向代码li a span { }。 - Jitendra Vyas

你也可以在所有子元素上应用 transform: scaleX(-1);，以撤消除背景以外的任何镜像效果 >:D - Klesun

Answer 2

我发现了一种方法，可以在看到Alex的答案中翻转背景而不是整个元素后，感谢Alex的答案。

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

请点击此处查看示例。

- Jitendra Vyas

---

@Jitendra 请您检查一下Jsfiddle的URL链接。我认为上面的代码与您在答案中发布的不同，而且它也不能正常工作。 - Sachin Jain

你发布的jsfiddle代码翻转了文本吗？这是你想要的吗，还是只是背景图片？ - mandza

你的 jsfiddle 与代码不一样，能否请你更新一下？ - Royi Namir

@JitendraVyas你好，来自2016！我正在考虑建议一次编辑，以修复jsfiddle的URL，因为它仍然链接到与您在此处提供的答案中不同的代码-是否愿意编辑帖子或删除链接？谢谢:) - totallyNotLizards

在Chrome中，-webkit-transform:scaleX(-1); - Wesley Smith

Answer 3

根据w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp transform属性在Internet Explorer 10、Firefox和Opera中得到支持。Internet Explorer 9支持一种替代方案，即-ms-transform属性（仅支持2D变换）。Safari和Chrome支持另一种替代方案，即-webkit-transform属性（3D和2D变换）。Opera仅支持2D变换。

这是一个2D变换，因此，在Chrome、Firefox、Opera、Safari和IE9+上应该可以使用供应商前缀。其他答案使用:before来阻止它翻转内部内容。我在我的页脚上使用了这个（垂直镜像来自我的页眉的图像）：

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

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

- jdforsythe

---

谢谢答复！这个对我来说最有效，因为其他方法要么也翻转所有子元素，要么需要更复杂的技巧来反转翻转。 - Austin Salgat

如果这个答案翻转了你想要的元素，只需将其下推到另一个元素中。换句话说，将不想翻转的内容包装在新的<div>元素中。 - Onosa

Answer 4

就事论事而言，对于基于Gecko核心的浏览器，您不能通过:visited来控制此功能，因为这会导致隐私泄漏。详情请参见http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

- Boris Zbarsky

Answer 5

您可以同时翻转垂直和水平。

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

使用 transition 属性可以实现炫酷的翻转效果。

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

实际上它翻转的是整个元素，而不仅仅是background-image

代码片段

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

<div id="myDiv">Some content here</div>

<button onclick="flip()">Click to flip</button>

- mdnfiras

---

“同时垂直和水平翻转”与将图像旋转180度具有相同的效果，运行良好，正是我所需要的。 - Stonecrusher