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に変換する方法、つまり復帰改行について

推薦する

Docker Compose で環境変数を参照する方法の例

プロジェクトでは、さまざまな条件や使用シナリオを制御するために、docker-compose.yml...

MySQL のクエリパフォーマンスに対する制限の影響

I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...

Linux Centos でスクリプトを使用して Docker をインストールする方法

Dockerの主な機能は何ですか?現在、Docker には少なくとも次のアプリケーション シナリオが...

WeChatアプレットは画像コントロールを選択します

この記事の例では、WeChatアプレットで画像コントロールを選択するための具体的なコードを参考までに...

MySQL テーブルを返すとインデックスが無効になるケースの説明

導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...

Google Recaptcha 認証を使用した Vue 実装例

最近のプロジェクトでは、Google ロボット認証を使用する必要があります。これには VPN が必要...

vue3とvue2の利点の比較

目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...

mysql 計算関数の詳細

目次2. フィールドの連結2. MySQL関数の例をいくつか挙げてください。 2.1 シンボル処理2...

CSS が複数のクラスに一致する方法のサンプルコード

CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...

MySQL はどのようにしてデータの整合性を確保するのでしょうか?

オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...

MySQLの基本的な共通コマンドの概要

目次MySQL の基本的な共通コマンド1. SQL文2. テーブルを作成する3. フィールドのプロパ...

Windows 2008 Server サブドメインを親ドメインに追加すると、ドメインが既に存在するというエラー メッセージが表示されます。

Windows 2008 Serverのサブドメインを親ドメインに参加させると、「ドメインは既に存...

MySQL のロックに関する問題

ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...

MySql マスタースレーブレプリケーションメカニズムの包括的な分析

目次マスタースレーブレプリケーションメカニズム非同期レプリケーション準同期レプリケーションマスタース...

uniAppエディタWeChatスライド問題について

ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...