2

リストビューでサムネイルの境界線の半径と境界線を設定すると、境界線は画像の一部として次のように扱われるように見えます。

ここに画像の説明を入力してください

私が使用しているCSSオーバーライドルールは次のとおりです。

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

画像に境界線の半径も含まれ、境界線と重ならないようにするにはどうすればよいですか？

4

2 に答える 2

3

現在、画像に境界線の半径を適用することはできません。あなたがしなければならないことは、それが機能するために境界半径を持つdivの背景としてそれを設定することです。

于 2012-08-27T00:51:15.463 に答える
1

上記の私のコメントを拡張し、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-27T01:48:27.353 に答える