背景画像に CSS3 変換を適用するためのソリューション

背景画像に CSS3 変換を適用するためのソリューション

CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場合や、コンテナ要素が回転しても背景画像を一定に保ちたい場合に適した回避策を紹介します。

CSS3 変換プロパティを使用して、任意の要素を拡大縮小、傾斜、回転します。ベンダー プレフィックスなしですべての最新ブラウザでサポートされています。 (古いブラウザをサポートしたい場合に備えて -webkit- を追加しました。)

#私の要素 {
-webkit-transform: 回転(30度);
変換: 回転(30度);
}

素晴らしいですね。ただし、これにより、要素全体(コンテンツ、境界線、背景画像)が回転します。背景画像だけを回転させたい場合はどうすればよいでしょうか?または、要素が回転しても背景を一定に保ちたい場合

現在、背景画像の遷移に関する W3C の推奨事項はありません。これは非常に便利なので、最終的には実現されると思いますが、現在同様の効果を使用したい開発者にとっては役に立ちません。

幸いなことに、解決策はあります。本質的には、これは背景画像を親コンテナーではなく、前または後の疑似要素に適用するためのハックです。疑似要素は独立して変換できます。

背景のみを変換する

コンテナ要素には任意のスタイルを適用できますが、疑似要素はその要素内に配置されるためposition:relativeに設定する必要があります。背景をコンテナーの外側にオーバーフローさせたくない場合は、overflow:hidden も設定する必要があります。

#私の要素 {
位置: 相対的;
オーバーフロー: 非表示;
}

これで、遷移背景を持つ絶対配置の疑似要素を作成できるようになりました。コンテナ コンテンツの下に表示されるように、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が利用できない問題を解決する

>>:  MySQLの7種類のログの概要

推薦する

vue+element テーブルで動的な列フィルタリングを実装するためのサンプルコード

要件: データをリスト形式で表示する場合、表示すべき情報項目が多く、表が横に長くなってしまいます。表...

CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明

最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...

Nexus サーバーを設定するための詳細な手順

1. ネクサスサービス構築の意義イントラネットの統合プロキシとして、チームで共同開発する場合、全員が...

Vueはシンプルなメモ帳機能を実装します

この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...

HTML スペースコードの簡単な分析

HTML についてどれくらい知っていますか? 現在、基本的な HTML コードを学習している場合は、...

RocketMQ の Docker インストールとインストール中に発生した問題の解決策

目次rocketmqイメージを取得する名前rvを作成する単一のブローカーノードを作成するrocket...

Dockerイメージをインポートおよびエクスポートする方法

この記事では、移行、バックアップ、アップグレードなどのシナリオで使用される Docker イメージの...

MySQL並列レプリケーションの簡単な説明

1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...

Nginx 設定ファイルの詳細な説明と最適化の提案ガイド

目次1. 概要2. nginx.conf 1) 設定ファイルの場所2) ワーカープロセス3) イベン...

MySQLデータのエクスポートとインポートに関する知識ポイントの簡単な分析

多くの場合、ローカル データベースのデータをエクスポートしたり、他のデータベースからデータをインポー...

mysql5.7でbinlogを使用してデータを復元する方法

ステップ1: MySQLでbinlogが有効になっていることを確認する '%log_bin%...

MySQL テーブル構造を Excel にエクスポートする方法

要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...

mysql8.0.20 のデータディレクトリを移行する方法

mysql のデフォルトのストレージ ディレクトリは/var/lib/mysql/です。以下は、デフ...

Linux でマウントされたファイルシステムの種類を表示する方法

序文ご存知のとおり、Linux は ext4、ext3、ext2、sysfs、securityfs、...

海外のウェブページのカラーマッチング事例20選共有

この記事では、優れた Web ページのカラー マッチングの事例を 20 件集めて紹介します。これらの...