목록 색인 배경 이미지 - 앞쪽으로?

Question

고객을위한 온라인 상점을 디자인 중이며 제품 이미지를 프레임에 표시해야하지만이 프레임은 이미지 위에 표시되어야하며 이미지의 뒤쪽에는 표시되어서는 안됩니다 (프레임의 이미지는 작은 흔들림이 아닌 제품 이미지와 같은 모양, 따라서 상단에 있어야하는 이유 - 목록의 배경 이미지가있는 제품 페이지의 스크린 샷 링크가 있습니다. - product page

(그 작은 분홍색 이미지는 앉아 있어야합니다. 이미지 상단)을 heres 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) 목록에 표시된 이미지는 무엇입니까?

대단히 감사합니다!

Answer 1

배경 이미지는 배경, 기간입니다. 이미지를 포함하는 다른 요소 위에 배경을 포함하는 요소를 절대적으로 배치해야합니다. 절대 위치 지정을 사용하여이를 수행 할 수 있습니다.

Answer 2

제품 이미지가 <img> 태그가 목록 항목에 포함되어 있다고 가정합니다.

"프레임"은 부모 요소의 배경 이미지이기 때문에 해당 요소 안에있는 모든 하위 요소 아래에 표시되어야합니다.

이

1. 변경 마크 업 및 CSS가 : 자사의 배경 이미지로 프레임이있는 여분의 요소를 추가 (프레임을 제거하기 위해 CSS를 변경

   원하는 효과를 얻을 수있는 몇 가지 방법이 있습니다 목록 항목의 배경 이미지로). 이 요소는 목록 항목의 다른 하위 요소 여야하며 제품 이미지 상단에 표시 되려면 이미지 요소 뒤에 올 필요가 있거나 위치와 Z- 색인이 있어야합니다.

2. 변경은 CSS 전용 : :after 볼 수 있도록이 다른 속성과 함께, .product-grid li:after*에 배경 이미지를 설정합니다.

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

   당신에게 : 당신이 당신의 프레임을 유지하기 위해 추가 요소 또는 :after pseudoelement 사용 여부

   content: ''; display: inline-block;

, 당신은 몇 가지 추가 크기 속성과 적절하게 위치를해야합니다 top, left 등 위치 속성에 음수 값을 사용하여 프레임 이미지를 제품 이미지보다 크게 만들 필요가 있습니다. -20px은 추정치 일뿐입니다. 그것으로 놀고 정확한 정확한 가치를 발견하십시오.

이 중 하나를 수행하면 사용성 문제가 발생할 수 있으므로 추가 마크 업 변경이나 JS를 사용하여 문제를 해결하는 것을 잊지 마십시오. 제품 이미지가 링크이고 프레임이 그 중 일부를 다루는 경우 사용자는 이미지를 클릭했을 때 프레임을 클릭하고 제품 페이지/팝업/기타가 표시되지 않는 이유를 궁금해 할 수 있습니다.

위의 첫 번째 제안 사항을 따르는 경우 링크 요소 내에 제품 이미지와 프레임 컨테이너 요소를 모두 묶어 링크 문제를 해결할 수 있습니다. 두 번째 제안을했다면 JS를 사용하여 제품 링크로 리디렉션되는 전체 목록 항목에 클릭 핸들러를 추가하거나 목록 항목 대신 프레임 요소를 포함 할 링크 요소의 :after을 사용할 수 있습니다. :before 및 :after pseudoelements는 속한 요소의 형제가 아닌 자식으로 동작하므로 앵커의 :after 요소를 클릭하면 앵커가 클릭으로 등록됩니다.

*은 링크 클릭 문제를 해결하는 방법에 따라 .product-grid li a:after 일 수 있습니다.