1

我很难让带纹理的背景图像正确显示在 HTML5 标记中。具体来说，我正在尝试将低不透明度水彩涂抹的 .png 纹理添加到已经应用了跨浏览器渐变的标签。我可以让渐变显示得很好，但不能让背景图像正确显示。

有人告诉我，它的 CSS 命令是简写的：

background:url("filepath");

这与我使用的报价类型有关吗？单引号/双引号有关系吗？还是根本没有引号？我不确定引号对选择器做了什么，或者您是否无法应用背景图像和渐变？您可以在http://www.zeldezine.info/demo/在明显的页脚位置查看我要修改的空间。

谢谢！

4

2 回答 2

3

您不能将背景图像和渐变添加到同一元素。至于引号，它们是单引号、双引号还是根本没有引号都没有关系。只要确保图像路径正确。

如果你想要两者，你可以这样做：

http://jsfiddle.net/vjEh7/

CSS：

footer {
    background: rgb(169,3,41);
    background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
    background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    background: linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
div {
    width: 150px;
    height: 160px;
    background: url(http://www.zeldezine.info/demo/img/logo_bottom.png) no-repeat;
}

HTML：

<footer>
    <div></div>
</footer>
于 2012-04-24T00:04:59.347 回答
0

试试这个：

body
{
  background-image:url('images/image.jpg');
  background-repeat:repeat;
}
于 2012-04-24T00:04:02.070 回答