CSS継承方法

次の背景画像を持つ div があるとします。

次の反射効果を作成します。

方法はたくさんありますが、もちろん最も速くて便利な方法を見つける必要があります。少なくとも、画像がどのように変更されたり、 divサイズがどのように変更されたりしても、コードを変更する必要はありません。

方法 1: -webkit-box-reflect

これは非常に新しい CSS プロパティであり、使い方が非常に簡単で、コンテンツをあらゆる方向に反映できます。しかし、互換性はあまりにも劣っています。

基本的に、-webkit- カーネルを搭載したブラウザのみがこれをサポートします。

しかし、使用すると本当に便利です。解決策は次のとおりです。

しかし、使用すると本当に便利です。解決策は次のとおりです。

div{
    -webkit-box-reflect: 以下;
}

box-reflectは、 below | above | left | right right の 4 つの方向を選択できます。詳細については、MDN を参照してください。

方法2: 継承、継承の使用

この質問は主に、互換性に優れたこの方法を紹介するためのものです。

inheritは何ですか? 各 CSS プロパティ定義の概要には、プロパティがデフォルトで継承されるか (「継承: はい」)、デフォルトで継承されないか (「継承: いいえ」) が示されます。これは、要素の属性に値を指定しない場合に値を計算する方法を決定します。

親の値を継承するinheritを柔軟に使用すると、一見複雑に見える多くの問題を解決できます。この質問では、画像コンテナに疑似要素を追加し、 background-image:inherit使用して親値の背景画像の値を継承します。この方法では、画像がどのように変更されても、CSS コードを変更する必要はありません。

div:前{
    コンテンツ： "";
    位置: 絶対;
    上: 100%;
    左: 0;
    右: 0;
    下部: -100%;
    背景画像: 継承;
    変換: rotateX(180deg);
}

要約する

CSS プロパティの継承方法についてはこれで終わりです。CSS 継承に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。