Question

我正在使用CSS3派，并在头标记之前通过附加的js文件调用它。

出于某种原因，我的背景图像出现了。我已经尝试了标准添加z-index和位置相对修复，但它没有显示。任何帮助指导表示赞赏。

以下是css。

.linkButton {
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #dc5c00;
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-gradient(linear, 0% 0% 0% 100% from(#e36000), to(#c85400));
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-linear-gradient(top, #e36000, #c85400);
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -moz-linear-gradient(top, #e36000, #c85400);
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -ms-linear-gradient(top, #e36000, #c85400);
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -o-linear-gradient(top, #e36000, #c85400);
  -pie-background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #000;
  padding: 10px 10px 10px 11px;
  display: inline-block;
  color: #ffffff;
  font-weight: bold;
  box-shadow: inset 0 1px 0 0 #ff801e, 0 0 1px 1px #ffffff, 0 0 1px 1px #ffffff;
  border: 1px solid #c85400;
  text-shadow: #813700 2px 2px 1px;
  line-height: 12px;
  margin-bottom: 7px;
  width: 326px;
  display: block!important;
  position:relative;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;`enter code here`
  z-index:1;
}

Answer 1

首先，对于普通旧图像+背景颜色，您不需要-pie-background。

如果您确实想使用-pie，请记住路径为relative to html not css。

（我假设你已经设置了mime-type等，而馅饼在不同情况下适合你。）

Answer 2

.linkButton{
    behavior: url(PIE.htc);
}

另外，尝试在与PIE.htc文件相同的位置添加包含以下内容的.index文件：

更多信息http://css3pie.com/

http://css3pie.com/documentation/

Answer 3

尝试连接它，不带点和斜线，如下所示：

-pie-background: url('Images/linkButtonBg.png') 100% 9px no-repeat #000;

CSS3饼背景图像不显示

3 个答案: