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が利用できない問題を解決する
SQL の基礎知識がある友人は、「クロステーブル クエリ」について聞いたことがあるはずですが、クロス...
CSS の一部のプロパティの前には「*」または「_」が付きます。さまざまなブラウザを識別する例えば...
序文Index Condition Pushdown (ICP) は、MySQL 5.6 の新機能で...
目次1. Tomcatを監視する方法2. Java独自の監視コマンド3. Tomcatのトラブルシュ...
目次1. 閉鎖の概念追加の知識ポイント: 2. 閉鎖の役割: 3. 閉鎖例3.1 liをクリックする...
どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...
1. 環境と関連ソフトウェア仮想マシン: VMwore Workstation Linuxシステム:...
多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...
独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...
目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...
主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...
本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...
シナリオリクエストが 10 件あるが、同時リクエストの最大数は 5 件で、リクエスト結果が必要である...
Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...
目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...