CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場合や、コンテナ要素が回転しても背景画像を一定に保ちたい場合に適した回避策を紹介します。 CSS3 変換プロパティを使用して、任意の要素を拡大縮小、傾斜、回転します。ベンダー プレフィックスなしですべての最新ブラウザでサポートされています。 (古いブラウザをサポートしたい場合に備えて -webkit- を追加しました。) #私の要素 { -webkit-transform: 回転(30度); 変換: 回転(30度); } 素晴らしいですね。ただし、これにより、要素全体(コンテンツ、境界線、背景画像)が回転します。背景画像だけを回転させたい場合はどうすればよいでしょうか?または、要素が回転しても背景を一定に保ちたい場合 現在、背景画像の遷移に関する W3C の推奨事項はありません。これは非常に便利なので、最終的には実現されると思いますが、現在同様の効果を使用したい開発者にとっては役に立ちません。 幸いなことに、解決策はあります。本質的には、これは背景画像を親コンテナーではなく、前または後の疑似要素に適用するためのハックです。疑似要素は独立して変換できます。 背景のみを変換する コンテナ要素には任意のスタイルを適用できますが、疑似要素はその要素内に配置されるため #私の要素 { 位置: 相対的; オーバーフロー: 非表示; } これで、遷移背景を持つ絶対配置の疑似要素を作成できるようになりました。コンテナ コンテンツの下に表示されるように、z-index は -1 に設定されています。 #myelement:before { コンテンツ: ""; 位置: 絶対; 幅: 200%; 高さ: 200%; 上: -50%; 左: -50%; Zインデックス: -1; 背景: url(background.png) 0 0 繰り返し; -webkit-transform: 回転(30度); 変換: 回転(30度); } 疑似要素の幅、高さ、位置を調整する必要がある場合があることに注意してください。たとえば、繰り返し画像を使用している場合、背景を完全に覆うには、回転領域がそのコンテナーよりも大きくなければなりません。 遷移要素の背景を修正 変換された要素の背景を修正しました。親コンテナのすべての変換が疑似要素に適用されます。したがって、その変換を元に戻す必要があります。たとえば、コンテナーが 30 度回転した場合、背景を -30 度回転させて固定位置に戻す必要があります。 #私の要素 { 位置: 相対的; オーバーフロー: 非表示; -webkit-transform: 回転(30度); 変換: 回転(30度); } #myelement:before { コンテンツ: ""; 位置: 絶対; 幅: 200%; 高さ: 200%; 上: -50%; 左: -50%; Zインデックス: -1; 背景: url(background.png) 0 0 繰り返し; -webkit-transform: 回転(-30度); 変換: 回転(-30度); ここでも、背景が親コンテナーを適切にカバーするように、サイズと位置を調整する必要があります。 この効果はすべての主要なブラウザで機能し、Edge と Internet Explorer の両方でバージョン 9 に戻ります。 IE8 では遷移は表示されませんが、背景は表示されます。 要約する 上記は、私が紹介した背景画像に CSS3 変換を適用するためのソリューションです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。 |
<<: dockerでifconfigが利用できない問題を解決する
要件: データをリスト形式で表示する場合、表示すべき情報項目が多く、表が横に長くなってしまいます。表...
最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...
1. ネクサスサービス構築の意義イントラネットの統合プロキシとして、チームで共同開発する場合、全員が...
この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...
HTML についてどれくらい知っていますか? 現在、基本的な HTML コードを学習している場合は、...
目次rocketmqイメージを取得する名前rvを作成する単一のブローカーノードを作成するrocket...
この記事では、移行、バックアップ、アップグレードなどのシナリオで使用される Docker イメージの...
1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...
目次1. 概要2. nginx.conf 1) 設定ファイルの場所2) ワーカープロセス3) イベン...
多くの場合、ローカル データベースのデータをエクスポートしたり、他のデータベースからデータをインポー...
ステップ1: MySQLでbinlogが有効になっていることを確認する '%log_bin%...
要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...
mysql のデフォルトのストレージ ディレクトリは/var/lib/mysql/です。以下は、デフ...
序文ご存知のとおり、Linux は ext4、ext3、ext2、sysfs、securityfs、...
この記事では、優れた Web ページのカラー マッチングの事例を 20 件集めて紹介します。これらの...