1. ホーム
  2. css

[解決済み】CSSで背景画像を反転させる方法は?

2022-04-05 04:47:50

質問

CSSで任意の背景画像を反転させる方法を教えてください。可能でしょうか?

現在、私はこの矢印画像を background-imageli をcssで作成します。

オン. visited この矢印を水平に反転させる必要があります。このようにすると、別の矢印の画像を作ることができます。 しかし について、CSSで画像を反転させることは可能なのか知りたいのです。 :visited

どのように解決するのですか?

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

サンプルはこちら http://jsfiddle.net/qngrf/807/