将常见图像放在CSS中

Question

我希望下面图片右侧显示的子弹在CSS类中，以便我在行中提及样式，不需要每次都插入图像。随着图像不断变换新主题，我想放入CSS。

  

它需要单独位于表格的行中，不能列在列表中。

我的CSS如下，但它不起作用

.ABP2_Bullet {
width: 13px;
height: 13px;
src: url("../../../../CBTShared.edu/CBTShared.doc/src/images/CATBulletBlue3_IF_WE.png");
 background-repeat: no-repeat;
overflow: hidden;}

我尝试的另一个选择是

.bullet_IfWe{
list-style-image:url(../images/CATBulletBlue3_IF_WE.png);
list-style-position:inherit;}

Answer 1

图像的src属性不是CSS属性，无法设置样式。 list-style-image属性只能用于为项目符号列表中的每个项目设置的图像（例如ol / li），而不是其他元素*。

通过使用background-image和适当的background-repeat: none在非图像元素上设置background-position，您可以获得类似的效果。 。细节将取决于周围的HTML。

*：从技术上讲，可以使用display: list-item将任何元素转换为项目符号列表，但通常不建议这样做。

Answer 2

首先几乎是正确的，而不是src你想要background。此外，如果使用跨度，则可能需要将其设置为内联块。

.ABP2_Bullet {
    display: inline;
    width: 13px;
    height: 13px;
    background: url("../../../../CBTShared.edu/CBTShared.doc/src/images/CATBulletBlue3_IF_WE.png") no-repeat;
    overflow: hidden;
}

用法：

<span class="ABP2_Bullet"></span>

这是一个类似的问题：https://stackoverflow.com/a/31332064/584192