Question

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

使用的图像是透明的。我尝试添加background-image：url（“img.png”）， - webkit ..但这似乎不起作用。还尝试了以下方式使用div .. < / p>

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

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

Answer 1

您可能想查看我上周所做的演示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）的颜色组成的，这非常低，因此即使一切工作正常，也很难在另一张图像后面找到它。

使用背景图像和css3渐变

1 个答案: