コンテンツを回転させずに CSS で背景画像を回転するにはどうすればよいですか?

コンテンツに影響を与えずに背景画像を回転する

CSS を使用してコンテナ内で背景画像を回転しようとすると、一般的に次の問題が発生します。画像コンテンツも回転します。これは、望ましい視覚効果を妨げる可能性があるため、イライラする制限のように思えるかもしれません。この問題に対する効果的な解決策の 1 つは、Sitepoint での洞察力に富んだディスカッションで紹介された手法にあります。

このアプローチには、疑似要素 (例:before) を作成し、それをコンテナ内に絶対的に配置することが含まれます。擬似要素の幅、高さ、オフセットを操作することで、背景画像用の別個のキャンバスとして機能できます。重要なのは、transform プロパティが疑似要素に適用され、元のコンテンツをそのままにして背景画像を回転させることです。

簡略化した例を次に示します。

#myelement:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    transform: rotate(30deg);
}

この例では、# myelement の :before 擬似要素は絶対的に配置され、コンテナ領域全体を確実にカバーできるようにパーセンテージを使用してサイズ設定されます。背景画像は、background プロパティを使用して設定され、擬似要素に適用されるtransform:rotate(30deg)は、画像を30度回転させます。

この手法を採用することで、背景画像を独立して回転できます。これにより、ページのレイアウトや機能を損なうことなく、目的の視覚効果を実現できます。

以上がコンテンツを回転させずに CSS で背景画像を回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。