ホームページ > ウェブフロントエンド > CSSチュートリアル > コンテンツに影響を与えずにコンテナ内の背景画像を回転するにはどうすればよいですか?

コンテンツに影響を与えずにコンテナ内の背景画像を回転するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-04 10:38:12
オリジナル
1017 人が閲覧しました

How Can I Rotate a Background Image in a Container Without Affecting Its Content?

コンテナ内の背景画像の回転

この質問では、ユーザーは Chrome スクロールバーの下部にある背景画像を回転したいと考えていますが、画像のみを回転させたいと考えています。

提供された CSS:

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ECEEEF;
    border-color: #999;
}
ログイン後にコピー

目的の回転を実現するには内容に影響を与えることなく、2 段階のアプローチを提案します。まず、CSS 変換を使用して目的の回転を持つ疑似要素を作成します。

#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);
}
ログイン後にコピー

これにより、コンテナ全体に広がり、目的の角度で回転する透明な疑似要素が作成されます。次に、コンテナのコンテンツが、この回転された擬似要素の上に配置されます。

参照リソースで提案されているように、この手法により、コンテンツを歪めることなく背景画像を回転できます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート