如何使用img标记和css和类而不是src属性显示图像

时间:2015-09-23 00:30:13

标签: html css asp.net-mvc kendo-ui

我必须从css设置img标签的图像。这是因为公司要求和img标签中的类都会动态变化。所以,以下是我的img标签和随附的CSS的代码。由于我使用的是Kendo UI,因此将通过Web服务

设置类和标题的值
    <img data-bind='attr: { class: exportPriorityIcon, title:   exportPriority }'/>

.priority-low {
    background-image: url('Images/export/priority_low.jpg');
}

.priority-medium {
    background-image: url('Images/export/priority_med.jpg');
}


So, the value exportPriorityIcon can be either priority-low  or priority-medium  as determined dynamically during run time. The value of title will be either "low" or "medium" 

显示图像。但标题的字符串值显示在它上面,周围有一个正方形。如果我从img标签中删除了title属性,则不显示任何图像。

1 个答案:

答案 0 :(得分:0)

您还需要在css中为图像应用高度和宽度。如果它按图像更改,则在与背景图像相同的类中应用高度和宽度。如果始终相同的高度/宽度将其应用于共享类。我还建议在img上添加一个src并使用透明的gif作为图像。您还应该在img上应用alt标记,使用标题作为文本。