CSS를 사용하여 이미지를 확대 할 때 기본 이미지를 표시하지 않는 방법

-1

마우스를 가져 가면 이미지가 확대됩니다.CSS를 사용하여 이미지를 확대 할 때 기본 이미지를 표시하지 않는 방법

그러나 확대 된 이미지는 그 아래에있는 이미지의 일부를 보여 주며이를 해결할 방법이 있습니까?

내 코드 :

.colour-selector input { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 
.colour-black { 
 
    background-image: url({{ 'Colour_-_Black.png' | asset_url }}); 
 
} 
 
.colour-blue { 
 
    background-image: url({{ 'Colour_-_Blue-suede.png' | asset_url  }}); 
 
} 
 
.colour-selector input:active +.colour-cc { 
 
    opacity: 0.9; 
 
} 
 
.colour-selector input:checked +.colour-cc { 
 
    -webkit-filter: none; 
 
    -moz-filter: none; 
 
    filter: none; 
 
} 
 
.colour-cc { 
 
    cursor: pointer; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 70px; 
 
    -webkit-transition: all 100ms ease-in; 
 
    -moz-transition: all 100ms ease-in; 
 
    transition: all 100ms ease-in; 
 
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7); 
 
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7); 
 
    filter: brightness(1.8) grayscale(1) opacity(.7); 
 
} 
 
.colour-cc:hover { 
 
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(0.9); 
 
    -moz-filter: brightness(1.2) grayscale(.5) opacity(0.9); 
 
    filter: brightness(1.2) grayscale(.5) opacity(0.9); 
 
    -webkit-transform: scale(3); 
 
    /* Safari and Chrome */ 
 
    -moz-transform: scale(3); 
 
    /* Firefox */ 
 
    -ms-transform: scale(3); 
 
    /* IE 9 */ 
 
    -o-transform: scale(3); 
 
    /* Opera */ 
 
    transform: scale(3); 
 
}

<div class="colour-selector"> 
 
    <input id="colour-black" type="radio" name="properties[colour]" value="colour-black" /> 
 
    <label class="colour-cc colour-black" for="colour-black"></label> 
 
    <input id="colour-blue" type="radio" name="properties[colour]" value="colour-blue" /> 
 
    <label class="colour-cc colour-blue" for="colour-blue"></label> 
 
</div>

정말 어떤 도움을 주셔서 감사합니다!

출처

2017-01-03 Bill

대체 패턴 대신 실제 값을 추가하십시오. –

안녕하세요, 저는 매우 신입생입니다. 귀하가 언급하는 것을 가르쳐 주시겠습니까? – Bill

'properties [color]'를 실제 속성으로 대체하고'{{ 'Color _-_ Blue-suede.png'| asset_url}}'을 실제 이미지 URL로 대체하십시오. –

조금 힘들지 만 입력 요소를 줄 바꿈하고 overflow: hidden을 추가하십시오.

출처

2017-01-03 06:11:34

CSS를 사용하여 이미지를 확대 할 때 기본 이미지를 표시하지 않는 방법

답변

관련 문제