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的列表视图边界半径和边框

回答

相关问题