CSS でコンテナを回転するときに背景画像の位置を固定するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS でコンテナを回転するときに背景画像の位置を固定するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-03 08:35:10

オリジナル

672 人が閲覧しました

How to Keep Background Image Position Fixed When Rotating a Container in CSS?

コンテナの回転中に画像の位置を保持する

Web 開発では、コンテンツに影響を与えずにコンテナの背景画像を回転するのは困難な作業となる場合があります。コンテナに変換回転を適用すると、多くの場合、画像コンテンツもそれに倣います。これに対処するために、画像コンテンツを元の位置に維持するソリューションを検討してみましょう。

CSS Transforms による背景画像の回転

次の CSS について考えてみましょう。これは、画像の背景画像を回転させようとします。垂直スクロールバーの減少ボタン:

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    ...
}

ログイン後にコピー

残念ながら、この方法では画像とそのコンテンツの両方が回転します。これを防ぐには、包括的な解決策については、以下のリンク先の記事を参照してください:

[http://www.sitepoint.com/css3-transform-background-image/](http://www .sitepoint.com/css3-transform-background-image/)

解決策: 反転した疑似要素回転

提供されるソリューションは、疑似要素を使用して仮想イメージレイヤーを作成し、それに逆回転を適用します。

#myelement:before {
    content: "";
    ...
    background: url(background.png) 0 0 repeat;
    transform: rotate(-30deg);
}

ログイン後にコピー

このメソッドは基本的にコンテナーの回転をオフセットし、コンテナーの回転をオフセットします。画像コンテンツを適切に配置します。特定のデザインで望ましい結果を得るには、回転角度やその他の値を調整する必要がある場合があることに注意してください。

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