使用背景图像和 css3 渐变

Question

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

Here's the image

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

<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) 的颜色组成，该值非常低，因此即使一切正常，也可能很难在另一张图像后面发现。