CSS継承方法

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 をよろしくお願いいたします。

<<:  Dockerコンテナでは、イメージを簡素化してサイズを縮小する方法を詳しく説明しています

>>:  テキストエリアのテキストをHTMLに変換する方法、つまり復帰改行について

推薦する

JS+Canvas でダイナミックな時計効果を実現

参考までに、Canvas をベースにしたダイナミッククロックのデモを用意しました。具体的な内容は次の...

一般的な MySQL 関数の例の概要 [集計関数、文字列、数値、時刻と日付の処理など]

この記事では、よく使用される MySQL 関数について説明します。ご参考までに、詳細は以下の通りです...

HTMLページにビデオを挿入する方法の概要

ページでビデオ タグを使用する場合は、Ogg Theora または VP8 (これに問題がない場合)...

JavaScript オブジェクトの組み込みオブジェクト、値型、参照型の説明

目次物体オブジェクト定義オブジェクトのメンバーを反復処理するJS組み込みオブジェクト数学オブジェクト...

Reactの3つの主要属性における状態の使用の詳細な説明

目次クラスコンポーネント機能コンポーネントsetStateの落とし穴React では多くの場所でデー...

CentOS6.9 での MySQL 5.7.17 のインストールと設定のチュートリアル

CentOS6.9はMysql5.7をインストールします。参考までに、詳細は次のとおりです。 1. ...

CSSはletter-spacingプロパティを通じて単語間の間隔を制御します。

letter-spacing プロパティ: 文字間のスペース (文字間隔) を増減します。このプロ...

MySQL 5.7.17 でパスワードを忘れた場合の対処方法

1. my.iniファイルにskip-grant-tablesを追加し、MySQLサーバーを再起動し...

異なるインデックスを更新してMySQLのデッドロックルーチンを解決する

前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...

DockerはElasticsearch7.6クラスタをインストールし、パスワードを設定します

Elasticsearch 6.8 以降、無料ユーザーは X-Pack のセキュリティ機能を使用でき...

Linux で CPU 使用率が高くなる原因をトラブルシューティングするプロセスの詳細な説明

目次序文始めるステップトラブルシューティング序文CPU 使用率が高くなるのは、オンラインでよくある問...

Vueはタブナビゲーションバーを実装し、左右のスライド機能をサポートしています

この記事では主に、Vue を使用してタブ ナビゲーション バーを実装し、flex レイアウトを使用し...

Docker プライベート ウェアハウスを構築する (自己署名方式)

作成したイメージを一元管理し、サービスの展開を容易にするために、プライベート Docker リポジト...

JDBC-idea で mysql をインポートして java jar パッケージに接続する (mac)

序文1. この記事ではMySQL 8.0バージョンを使用していますバージョン5.0と比較すると、パッ...

...