如何在使用CSS放大圖像時不顯示底層圖像

-1

但是，放大的圖像顯示了它下面的部分圖像，有沒有辦法解決這個問題？

我的代碼：

.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放大圖像時不顯示底層圖像

回答

相關問題