背景圖上的邊框半徑

是否可以在background-image上添加border-radius？背景圖上的邊框半徑

2013-01-16 Michał Urban

背景圖片，實際頁面的背景圖片..？你什麼意思？需要更多信息。 – Bart

這個問題怎麼可能被upvoted兩次？質量非常差。你有沒有嘗試過任何東西？你有試過Google嗎？你對「背景圖」的定義是什麼，因爲@Bart已經提到過，它是'body'的背景，一個隨機的'div'還是甚至是'pre'元素？請更具體一些。 – Jelmer

1. div 的背景圖像2.我不想通過div上的border-radius設置裁剪背景圖像，因爲我的背景圖像位於中間，並且不與div邊框接觸，所以background-image isn'裁剪。 –

試試這個

div { 
     border: 10px solid white; 
     -moz-border-radius: 10px; 
     background:url(map_background_box_right.png); 
     }

來源

2013-01-16 08:20:07 Nandu

for crossbrowser you need -moz-border-radius：50px;如果你不得不優化舊的ie，你不能沒有外部腳本，如pie.htc [鏈接]（http://css3pie.com/） –

是的，它是可能的：一個div的

div { 
    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    border: none; 
    width: 500px; 
    height: 335px; 
    background: url(http://themescompany.com/wp-content/uploads/2012/02/6402.jpg); 
}

Click here for demo.

來源

2013-01-16 08:22:13

這很好，但如果我會添加 ' background-position：50px background-repeat：no-repeat'。背景圖像**僅**由邊框div裁剪。 –

我認爲沒有辦法將border-radius直接添加到背景圖片上，但是可以通過作弊來實現：http://jsfiddle.net/fbDZb/8/ –

David Czinege，謝謝，不幸我找解決方案無需額外的div無論如何感謝:-) –

背景圖上的邊框半徑

回答

相關問題