[解決済み】CSSで背景画像を反転させる方法は?
2022-04-05 04:47:50
質問
CSSで任意の背景画像を反転させる方法を教えてください。可能でしょうか?
現在、私はこの矢印画像を
background-image
の
li
を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/
関連
-
[解決済み] ブートストラップカラムで画像の下にキャプションを中央配置する
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 他のブラウザが画像を読み込むときに、Chromeがエラー **Failed to load resource: net::ERR_NAME_NOT_RESOLVED** を発生させる。
-
[解決済み】Rails: Sprockets::Rails::Helper::AssetNotPrecompiled の開発中。
-
[解決済み] 2つのdivを隣り合わせに配置するには?
-
[解決済み] font-face は OpenType 埋め込み許可チェックに失敗しました。パーミッションはインストール可能である必要があります。
-
[解決済み] Chrome で注入されたスタイルシートによる奇妙なスタイリングが発生する
-
[解決済み] Bootstrap 4のナバーボタンのアイコンの色を変更するにはどうすればよいですか?
-
[解決済み] SPANのheightプロパティを設定する方法
-
[解決済み] svgの円のダブルストロークの色
-
[解決済み] ヘッダー付きCSSボックス
-
[解決済み] ブートストラップカラムで画像の下にキャプションを中央配置する