如何將邊框半徑應用於帶填充圖像？

-1

我有在頂部和底部的白色填充圖像。請參閱附件。如何將邊框半徑應用於帶填充圖像？

當我嘗試使用border-radius這張圖片時，我得到了扭曲的邊緣。

我該如何解決這個問題？因爲我無法在沒有空白的情況下替換圖像上的圖像。

Snippet

來源

2017-01-12 Hamama

創建一個演示片段。圖像的填充部分是什麼？ – connexo

沒有這個填充內部圖像，我的意思是這是圖像的一部分 – Hamama

如果您知道圖像內填充的確切高度，您可以創建一個使用該圖像作爲容器背景圖像的工作區。如果您按照「真實」圖像大小精確調整容器大小，並正確定位背景圖像，則可以在該容器上應用邊界半徑。 – connexo

如果你知道填充的圖像內的確切高度，你可以創建一個使用圖像作爲容器上的背景圖像的workarund。如果您按照「真實」圖像大小精確調整容器大小，並正確定位背景圖像，則可以在該容器上應用邊界半徑。

.imagecontainer { 
 
    background: url(http://nafantano.com/image/cache/catalog/toys/2017/img_8356____by_nafantano-d9aagdh-399x287.jpg) no-repeat 0 -10px; 
 
    border-radius: 20px; 
 
    display: inline-block; 
 
    height: 230px; 
 
    width: 300px; 
 
}

<a href="#" class="imagecontainer"></a>

https://jsfiddle.net/tc29nedy/5/

來源

2017-01-12 13:24:49 connexo

你可以嘗試

img { 
 
    border-radius: 20px; 
 
}

<img src="http://wallpapercave.com/wp/206q0ew.jpg" style="height:250px;">

來源

2017-01-12 13:33:12

你還沒有明白這個問題。 – connexo

這裏是我的建議：

<div class="image hovereffect"> 
       <a href="#"> 
       <img class="img-responsive" src="https://theimgurl" id="featured_55"> 
</a></div>

使用CSS中溢出：隱藏的圖像類和圖像IMG需要的margin-top：-10。

.image { 
    width:300px; 
    height: 250px; 
    border-radius:20px; 
    overflow:hidden; 

    } 

.image img { 
margin-top:-10px; 

}

來源

2017-01-12 13:41:59

如何將邊框半徑應用於帶填充圖像？

回答

相關問題