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

本文介绍了如何翻转背景图像使用CSS？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

How to flip any background image using CSS? Is it possible?

currenty我在背景图片中使用此箭头图片 li in css

currenty I'm using this arrow image in a background-image of li in css

在：访问我需要水平翻转这个箭头。我可以这样做，箭头的另一个图像但我只是想知道是否可以翻转CSS中：

On :visited I need to flip this arrow horizontally. I can do this to make another image of arrow BUT I'm just curious to know is it possible to flip the image in CSS for :visited

推荐答案

我发现我的方式是翻转只有背景不是整个元素，看到一个线索翻转在Alex的答案。感谢亚历克斯为您的回答

I found I way to flip only the background not whole element after seeing a clue to flip in Alex's answer. Thanks alex for your answer

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

    }

查看示例

这篇关于如何翻转背景图像使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！