0

私はクライアント向けのオンライン ショップを設計しており、商品画像をフレームに表示する必要がありますが、このフレームは画像の後ろではなく、画像の上に表示する必要があります (フレームの画像は少し波打ったもので、同じではありません)製品画像としての形状、したがって、それを一番上に置く必要がある理由 - リストに背景画像がある製品ページのスクリーンショットへのリンク -製品ページ

(これらの小さなピンク色の画像は、画像の上に配置する必要があります) CSS は次のとおりです。

.product-grid{
 list-style: none;
 margin: 0;
 color: {{ settings.grid_text_colour }};
 }

   .product-grid li{
 padding: 25px 5px 5px 5px;
 width: 190px;
 float: left;
 margin: 0 15px 10px 0;
 position: relative;
 text-align: center;
background: url({{ 'squiggle.png' | asset_url }}) no-repeat;
}

透明な背景画像（squiggle.png）が実際にリストに表示されている画像の上に置かれることはありますか？

どんな助けでも大歓迎です！

4

2 に答える 2

1

<img>商品画像はリスト項目に含まれるタグだと思います。

「フレーム」は親要素の背景画像であるため、その要素内の子の下に表示する必要があります。

必要な効果を得るには、いくつかの方法があります。

  1. マークアップと CSS を変更します。背景画像としてフレームを持つ要素を追加します (また、CSS を変更して、リスト項目の背景画像としてのフレームを削除します)。この要素はリスト アイテムの別の子である必要があり、製品画像の上に表示するには、画像要素の後に配置するか、位置と z-index を指定する必要があります。

  2. CSS のみを変更します。背景画像を.product-grid li:after*に設定し、これらの他のプロパティを表示して:after表示します。

    content: ''; display: inline-block;

フレームを保持するために追加の要素または:after疑似要素を使用しているかどうかにかかわらず、フレームのサイズと位置を適切に設定するには、いくつかの追加のプロパティが必要になります。

position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;

フレーム画像を製品画像よりも大きくするには、、、などの位置プロパティにtop負の値を使用する必要があります。は単なる見積もりです。それをいじって、正しい正確な値を見つけてください。left-20px

これらのいずれかを行うと、ユーザビリティの問題が発生する可能性があるため、マークアップをさらに変更するか、JS を使用して対処することを忘れないでください。製品画像がリンクであり、フレームがその一部を覆っている場合、ユーザーは画像をクリックしたと思ったときにフレームをクリックしてしまい、製品ページ/ポップアップ/その他が表示されない理由を疑問に思う可能性があります。

上記の最初の提案に従う場合は、商品画像とフレーム コンテナー要素の両方をリンク要素内にラップすることで、リンクの問題を解決できます。2 番目の提案を使用した場合は、JS を使用して、製品リンクにリダイレクトするリスト項目全体にクリック ハンドラーを配置するか、リスト項目で:afterはなくリンク要素を使用してフレーム イメージを保持することができます。疑似要素は、それらが属する要素の兄弟ではなく子として動作するため、アンカーの:before要素をクリックすると、アンカーのクリックとして登録されます。:after:after

*.product-grid li a:afterリンククリックの問題にどのように対処するかによって異なる場合があり ます。

于 2012-10-04T18:21:42.567 に答える
0

背景画像は、背景、ピリオドにあります。背景を含む要素を、画像を含む別の要素の上に絶対配置する必要があります。これを行うには、絶対配置を使用できます。

于 2012-10-04T18:07:06.987 に答える