如何使用 img 标签和 css 和 class 而不是 src 属性显示图像答案

【问题标题】：How to display an image using an img tag and css and class instead of src attribute如何使用 img 标签和 css 和 class 而不是 src 属性显示图像
【发布时间】：2015-09-23 00:30:13
【问题描述】：

我必须从 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 属性，则不会显示任何图像。

【问题讨论】：

我找到了基于此答案的部分解决方案：stackoverflow.com/questions/7582205/…。现在的问题是图像周围有边框。在我尝试的 css 中，border:0 仍然显示边框。 css代码如下：Design Viz .priority-low { padding-left:25px;背景：url（_includes/images/agenda-design.gif）左上角不重复；显示：内联块；高度：17px；宽度：50px； }

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

【解决方案1】：

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

【讨论】：