背景クリップ コンボボックスをプレイするちょっとした方法_html/css_WEB-ITnose

以前のプロジェクトには、以下に示すように半透明のタグコンポーネントがありました。単語の数に応じて長さが増加し、矢印は左または右になります。

コードでの実装を開始し、それを 2 つの要素 [角丸長方形 + 角丸三角形] に分割しますが、それを完全に実現することは常に不可能です。理由は少なくとも次のとおりです。

1. 重なり合う場合の半透明特性。領域では、透明オーバーレイのゴーストが発生します。
2. 2 つの要素の高さの位置は、常に同じには一致しません (ビューポートのスケーリングのため)。

紆余曲折を経て、小さな画像を使用し、複数の CSS3 背景サブプロパティを組み合わせ、1 つの要素だけを使用して効果を実現する方法を見つけました。

  padding-right: 18px;  background-image: url(https://img.alicdn.com/tps/TB1t0O9IFXXXXb8XXXXXXXXXXXX.png), url(https://img.alicdn.com/tps/TB1hNC6IFXXXXaEXpXXXXXXXXXX.png);  background-position: right 0;  background-size: contain;  background-repeat: no-repeat, repeat-x;  background-clip: padding-box, content-box; 

1. まず、複数の背景画像を使用します。 CSS3 の機能を使用して 1 つの要素を作成します (画像は非常に小さいです)。
2. 次に、背景クリップ機能を使用して、2 つの背景画像を要素の異なる領域に接続します。この機能は、ボックスのサイズ設定と似ています。
   1. ちなみに、これは、background-origin と組み合わせて理解できます。2 つの属性の値の範囲は同じですが、概念が異なるため、得られる効果が異なります。
   2. クリップはトリミングされており、原点は開始点です。前者は背景画像の完全性を破壊しますが、後者は背景画像が表示される開始領域を変更するだけです。具体的な定義はここで見つけることができます。
3. 次に、二重に割り当てられたbackground-position属性とbackground-repeat属性を組み合わせて、パディング領域とコンテンツ領域の背景画像を区別する設定を行います。
   1. ここでの繰り返しに注意してください。repeat-x によって四角形の主要部分が消去されるため、コード内では、background-origin の代わりに、background-clip が使用されます。background-repeat による後者の効果は非効率的です。これは、CSS デバッグにおける一般的な 相互干渉 現象を再度反映しています
4. このようにして、 単一要素長適応タグ を実現できます。

最終的な要素レイアウトのレビューは次のとおりです