css - CSSを使用して背景画像を反転するには?

Question

CSSを使用して背景画像を反転する方法は? 出来ますか？

現在、CSSの abackground-imageでこの矢印画像を使用していますli

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

ソース。

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

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

したがって、要素を反転してから、そのすべての子を再度反転することになります。ネストされた要素でも動作します。

Answer 4

:visited価値があるのは、Gecko ベースのブラウザーの場合、結果としてプライバシーが漏洩するため、このことを条件付けることはできません. http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/を参照してください。