1

我无法将背景图像与 css3 渐变一起使用。我已经经历了很多解决方案，但我仍然无法获得图像。 我的小提琴

这是图像

使用的图像是透明的。我尝试添加 background-image: url("img.png"), -webkit .. 但这似乎不起作用。还尝试以以下方式使用 div ..

<div id="div-with-gradient">
   <div id="div-with-image">
    <!-- content -->
    </div>
</div>

任何解决方案都非常感谢..

4

1 回答 1

4

你可能想看看我上周做的这个演示http://dabblet.com/gist/3106299

它在同一个元素上使用图像和 CSS3 渐变。

关于您的小提琴，url('../img/msg_arrow.png')在 jsFiddle 中不起作用 - 您需要指定完整路径。

此外，您正在用

.btn1 {
    background-color: #f47e29;
    border: solid 1px #b16127;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f48c41', endColorstr='#d66f24',GradientType=0 ); /* IE6-8 */
    padding: 0 26px;
}

它设置了纯橙色背景。

我刚才注意到的另一件事：使用background-image也不正确：

background-image: url('../img/msg_arrow.png') scroll 0 0 no-repeat, linear-gradient(bottom, #000000, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 49%, rgba(72,72,72,.12) 50%, rgba(247,245,245,.12));

您需要使用background那里而不是background-image.

最后，还有一点需要注意的是，背景是一个在另一个之上堆叠显示的，最后列出的背景是堆栈底部的背景。在您的情况下，它是显示在半透明图像后面的渐变。而且由于您的渐变由具有 0.12 第四 RGBa 值 (alpha) 的颜色组成，该值非常低，因此即使一切正常，也可能很难在另一张图像后面发现。

于 2012-07-17T15:33:16.117 回答