CSS图像精灵不在样式表中工作，而作为内联代码工作

我不知道为什么CSS图像精灵不是作为一个单独的CSS文件工作，而是作为一个内联代码工作

有什么问题吗？ 我还录制/附上了一段视频。 视频=>

这对我来说很奇怪，直到现在我还没有找到解决办法。 我在所有浏览器（Chrome、Opera、Firefox）中都有此问题

.d特征框{
文本对齐：居中；
边缘底部：30px；
显示：内联块；
宽度：100%；
最大宽度：272px；
}
.dFeatureBox.icon{
显示器：flex；
显示：-webkit flex；
证明内容：中心；
对齐项目：居中；
宽度：106px；
高度：106px；
背景色：#ffffff；
边界半径：16px；
文本对齐：居中；
边缘底部：35px；
左边距：自动；
右边距：自动；
-webkit变换原点：中心；
-moz变换原点：中心；
-ms变换原点：中心；
变换原点：中心；
-webkit转换：规模（1）；
-moz变换：比例（1）；
-ms变换：尺度（1）；
变换：比例（1）；
-网络工具包盒阴影：0 8px 12px rgba（31,27,90,0.08）；
盒影：0 8px 12px rgba（31,27,90,0.08）；
-webkit过渡：所有0.3秒轻松；
过渡：所有0.3秒缓解；
}
.雪碧背景{
背景：url（“https://i.imgur.com/VO1dBBA.jpg");
}
.bg-1{
宽度：62px；
高度：62px；
背景位置：0px 61px；
}
.bg-2{
宽度：64px；
高度：62px；
背景位置：62px 61px；
}
.bg-3{
宽度：64px；
高度：62px；
背景位置：127px；
}
.D特征框.图标i{
字体大小：50px；
背景：-webkit线性梯度（至底部，#45b35e，#6ad56a）；
背景：线性梯度（至底部，#45b35e，#6ad56a）；
颜色：透明；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
背景剪辑：文本；
}

赫斯比
标题
长描述。
标题
长描述。
标题
长描述。

我亲爱的朋友，它正在工作，请创建一个新的示例，然后运行此代码。我使用一个外部css文件来运行这段代码，它工作得非常好

或

尝试使用相对路径调用映像

.d特征框{
文本对齐：居中；
边缘底部：30px；
显示：内联块；
宽度：100%；
最大宽度：272px；
}
.dFeatureBox.icon{
显示器：flex；
显示：-webkit flex；
证明内容：中心；
对齐项目：居中；
宽度：106px；
高度：106px；
背景色：#ffffff；
边界半径：16px；
文本对齐：居中；
边缘底部：35px；
左边距：自动；
右边距：自动；
-webkit变换原点：中心；
-moz变换原点：中心；
-ms变换原点：中心；
变换原点：中心；
-webkit转换：规模（1）；
-moz变换：比例（1）；
-ms变换：尺度（1）；
变换：比例（1）；
-网络工具包盒阴影：0 8px 12px rgba（31,27,90,0.08）；
盒影：0 8px 12px rgba（31,27,90,0.08）；
-webkit过渡：所有0.3秒轻松；
过渡：所有0.3秒缓解；
}
.雪碧背景{
背景：url（“https://i.imgur.com/VO1dBBA.jpg");
}
.bg-1{
宽度：62px；
高度：62px；
背景位置：0px 61px；
}
.bg-2{
宽度：64px；
高度：62px；
背景位置：62px 61px；
}
.bg-3{
宽度：64px；
高度：62px；
背景位置：127px；
}
.D特征框.图标i{
字体大小：50px；
背景：-webkit线性梯度（至底部，#45b35e，#6ad56a）；
背景：线性梯度（至底部，#45b35e，#6ad56a）；
颜色：透明；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
背景剪辑：文本；
}

赫斯比
标题
长描述。
标题
长描述。
标题
长描述。

谢谢@Hiren。我还有另一个问题：如何向sprite css添加“Alt”属性？现在我们有了标记，而“Alt”仅用于tag@Amin当您使用css在div上使用“background image”或“background”时，我不需要“alt”标记。@Amin请遵循此链接：这将消除您的混淆。@Amin如果要添加，可以添加title=“example”如果你在背景中添加图片，它不会对你的搜索引擎优化产生任何影响。但你正在考虑使用alt标签进行搜索引擎优化，你必须在标签中拍摄图像。