我不知道为什么 CSS image sprite 不能作为一个单独的 CSS 文件工作，而是作为一个内联代码工作!
有什么问题？ 我也录制/附上了一段视频。 视频=> 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>最佳答案
我亲爱的 friend 它正在运行，请创建一个新示例然后运行此代码。我正在使用外部 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 图像 Sprite 在样式表中不起作用，而作为内联代码工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59765518/