Html 旋转悬停时CSS背景图像覆盖div

我有一张悬停时具有翻转效果的卡片。卡片有一个背景图像，每一面都有一个颜色到透明的渐变

当卡片翻转时，背景图像位置位于顶部、渐变和div内容上方。没有背景图像，效果很好

如何解决这个问题，并将图像置于内容和渐变下

这是一个带有代码的代码笔

.flip卡{
透视图：1000px；
高度：400px；
宽度：300px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.8s；
变换样式：保留-3d；
}
.翻转卡正面，
.把卡片翻回去{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
填充：1em；
垫面：5rem；
}
.翻转卡正面{
背景：莫兹线性梯度（顶部，rgba（100153210，1）28%，rgba（109165218，1）55%，rgba（125185232，0）100%）；
/*FF3.6-15*/
背景：webkit线性梯度（顶部，rgba（100153210,1）28%，rgba（109165218,1）55%，rgba（125185232,0）100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（底部，rgba（100153210,1）28%，rgba（109165218,1）55%，rgba（125185232,0）100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#6499d2'，endColorstr='#007db9e8'，GradientType=0）；
/*IE6-9*/
颜色：白色；
}
.把卡片翻回去{
变换：旋转（180度）；
背景：-莫兹线性梯度（顶部，rgba（255，255，255，1）1%，rgba（255，255，255，1）10%，rgba（255，255，255，0.5）80%，rgba（255，255，255，0）100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（顶部，rgba（255，255，255，1）1%，rgba（255，255，255，1）10%，rgba（255，255，255，0.5）80%，rgba（255，255，255，0）100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（底部，rgba（255，255，255，1）1%，rgba（255，255，255，1）10%，rgba（255，255，255，255，0.5）80%，rgba（255，255，255，0）100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#00ffffff'，GradientType=0）；
/*IE6-9*/
}
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}

正面
返回

考虑在内部div中使用背景图像。我使用了一个CSS变量，使其易于处理，并避免在CSS中定义图像，这样您就可以通过内联样式不断调整图像

.flip卡{
透视图：1000px；
高度：400px；
宽度：300px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.8s；
变换样式：保留-3d；
}
.翻转卡正面，
.把卡片翻回去{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
填充：1em；
垫面：5rem；
}
.翻转卡正面{
背景：
线性梯度（至底部，rgba（100153210,1）28%，rgba（109165218,1）55%，rgba（125185232,0）100%），
var（--i）；
颜色：白色；
}
.把卡片翻回去{
变换：旋转（180度）；
背景：
线性梯度（至底部，rgba（255，255，255，1）1%，rgba（255，255，255，1）10%，rgba（255，255，255，0.5）80%，rgba（255，255，255，0）100%），
var（--i）；
}
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}

正面
返回

不完全确定问题出在哪里。在Google Chrome上，它对我来说很好（或者至少我觉得你们希望它工作），所以代码片段很好。在codepen中，或者在apache中运行Chrome和Safari都不起作用。var（--i）是新的CSS4变量吗？与当前浏览器的兼容性如何？我使用SASS编码并使用它引发错误。@Ramon san这不是很新，而且支持非常好（）。。。对于SASS，我想在编译时需要注意，CSS变量有一些技巧