Question

我最困难的时候让纹理背景图片在HTML5标签中正确显示。具体来说，我正在尝试将一个低透明度水彩涂抹的.png纹理添加到已经应用了跨浏览器渐变的标记。我可以让渐变显示正常，但无法正确显示背景图像。

我被告知它的CSS命令很简短：

background:url("filepath");

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

谢谢！

Answer 1

您无法将背景图像和渐变添加到同一元素。至于引用它们是单身，双人还是根本没有关系。只需确保图像路径正确。

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

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>

Answer 2

试试这个：

body
{
  background-image:url('images/image.jpg');
  background-repeat:repeat;
}

div的背景图片

2 个答案: