CSS image Sprite 在样式表中不起作用，而作为内联代码起作用

Question

我不知道为什么 CSS image sprite 不能作为一个单独的 CSS 文件工作，而是作为一个内联代码工作！

有什么问题吗？我也有 recorded/attached 视频。视频 => https://gofile.io/?c=ITICxx

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

.dfeature-box {
text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}

.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;

background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.sprite-bg{

background: url("https://i.imgur.com/VO1dBBA.jpg");

}
.bg-1{
    width:62px;
    height:62px;
    background-position: 0px 61px;
}
.bg-2{
    width: 64px;
    height: 62px;
    background-position: 62px 61px;
}
.bg-3{
    width: 64px;
    height: 62px;
    background-position: 127px;
}

.dfeature-box .icon i {
    font-size: 50px;
    background: -webkit-linear-gradient(to bottom, #45b35e, #6ad56a);
    background: linear-gradient(to bottom, #45b35e, #6ad56a);
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hustbee</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
 <body>
   <div class="dfeature-box">
                    <div class="icon"><div class="sprite-bg bg-1"></div></div>
                    <div class="title">TITLE</div>
                    <div class="details">long description.</div>
                </div>


                <div class="dfeature-box">
                    <div class="icon"><div class="sprite-bg bg-2"></div></div>
                    <div class="title">TITLE</div>
                    <div class="details">long description.</div>
                </div>

                <div class="dfeature-box">
                    <div class="icon"><div class="sprite-bg bg-3"></div></div>
                    <div class="title">TITLE</div>
                    <div class="details">long description.</div>
                </div>

 </body>
</html>

Answer 1

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

或

尝试用相对路径调用图片

.dfeature-box {
  text-align: center;
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
  max-width: 272px;
}

.dfeature-box .icon {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  width: 106px;
  height: 106px;
  background-color: #ffffff;
  border-radius: 16px;
  text-align: center;
  margin-bottom: 35px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
  box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.sprite-bg {
  background: url("https://i.imgur.com/VO1dBBA.jpg");
}

.bg-1 {
  width: 62px;
  height: 62px;
  background-position: 0px 61px;
}

.bg-2 {
  width: 64px;
  height: 62px;
  background-position: 62px 61px;
}

.bg-3 {
  width: 64px;
  height: 62px;
  background-position: 127px;
}

.dfeature-box .icon i {
  font-size: 50px;
  background: -webkit-linear-gradient(to bottom, #45b35e, #6ad56a);
  background: linear-gradient(to bottom, #45b35e, #6ad56a);
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hustbee</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <div class="dfeature-box">
    <div class="icon">
      <div class="sprite-bg bg-1"></div>
    </div>
    <div class="title">TITLE</div>
    <div class="details">long description.</div>
  </div>

  <div class="dfeature-box">
    <div class="icon">
      <div class="sprite-bg bg-2"></div>
    </div>
    <div class="title">TITLE</div>
    <div class="details">long description.</div>
  </div>

  <div class="dfeature-box">
    <div class="icon">
      <div class="sprite-bg bg-3"></div>
    </div>
    <div class="title">TITLE</div>
    <div class="details">long description.</div>
  </div>
</body>

</html>

CSS image Sprite 在样式表中不起作用，而作为内联代码起作用

CSS image Sprite not working in the stylesheet, while working as an inline code

css

css-sprites