jQuery Mobile的列表視圖邊界半徑和邊框

如果我設置邊框半徑和在ListView縮略圖邊框，它似乎把邊境的畫面是這樣的一部分：jQuery Mobile的列表視圖邊界半徑和邊框

enter image description here

的我使用CSS重寫規則是這樣的：

.ui-li-thumb { 
    width: 50px; 
    height: 50px; 
    margin: 8px; 
    border: 2px solid #333 !important; 
    border-radius: 10px !important; 
}

如何使它因此圖像具有邊界半徑太大，所以不重疊邊框？

來源

2012-08-27 Timm

決定在我上面的評論擴張，準確地告訴你如何可以動態改變使用改變圖像爲背景圖片的JavaScript：

的JavaScript：

$('li').each(function(index) { 

    // Find thumbnail image 
    var thumb = $(this).find('img'); 

    // Get the src 
    var thumbsrc = thumb.attr('src'); 

    // Insert a span (absolutely positioned using below css) 
    thumb.after('<span class="thumbnail" />'); 

    // Apply our thumbnail as a background image to the span 
    $(this).find('span.thumbnail').css("background-image", 'url(' + thumbsrc + ')'); 

    // remove thumbnail image 
    $(this).find('img').remove(); 
});

CSS：

.thumbnail { 
    width:18px; 
    height: 16px; 
    display:block; 
    position: absolute; 
    left:10px; 
    border-radius: 5px; 
}

工作示例：

http://jsfiddle.net/x54A6/1/

來源

2012-08-27 01:48:27 Jeemusu

如果您將JS的最後一行更改爲'thumb.hide（）;'（否則右側的文本將移至圖像下），這會起作用。謝謝:) – Timm

很酷，是可能有點不同，取決於您的個人設置。 – Jeemusu

您目前無法將邊框半徑應用於圖像，這真的很糟糕。你需要做的是將其設置爲具有邊框半徑的div的背景以使其可以工作。

來源

2012-08-27 00:51:15 CoreyRS

不知道它將如何與jQuery Mobiles標記一起工作，但您甚至可以動態執行它。搜索DOM中的圖像，刪除它們，然後使用jQuery將它們作爲背景圖像重新應用到最近的跨度。 – Jeemusu

jQuery Mobile的列表視圖邊界半徑和邊框

回答

相關問題