Question

我的CSS：

background-image: url(/images/framework/arrow-down-small.png) no-repeat center; /* fallback */
                background-image: url(/images/framework/arrow-down-small.png) no-repeat center, -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); /* Saf4+, Chrome */
                background-image: url(/images/framework/arrow-down-small.png) no-repeat center, -webkit-linear-gradient(top, #eee, #ccc); /* Chrome 10+, Saf5.1+ */
                background-image: url(/images/framework/arrow-down-small.png) no-repeat center,    -moz-linear-gradient(top, #eee, #ccc); /* FF3.6+ */
                background-image: url(/images/framework/arrow-down-small.png) no-repeat center,     -ms-linear-gradient(top, #eee, #ccc); /* IE10 */
                background-image: url(/images/framework/arrow-down-small.png) no-repeat center,      -o-linear-gradient(top, #eee, #ccc); /* Opera 11.10+ */
                background-image: url(/images/framework/arrow-down-small.png) no-repeat center,         linear-gradient(top, #eee, #ccc); /* W3C */

我想要的只是背景图像和渐变。 HTML元素是：

<input type="button" class="mybutton" />

但是

背景图片根本不显示
渐变不存在

绝对路径是正确的，因为如果我尝试一个简单的背景：url（...）没有渐变，那么图像就在那里。

怎么了？

由于哈德

Answer 1

使用no-repeat，您应该跳过-image，只能使用background:“，例如：

background-image: url('image.png') no-repeat; /* Doesn't work */
background-image: url('image.png'); /* Works */

当您说您仅使用background:时，我认为它确实有效，因为您没有使用background-image

也许你应该尝试：

<input type = "image" class = "mybutton"/>

希望有所帮助！

编辑：报价不是强制性的

background-image: url(image.png);
background-image: url("image.png");
background-image: url('image.png');

是同样的事情

CSS背景图像不起作用 - 没有显示

1 个答案: