CSS背景图像和默认背景？答案

【问题标题】：CSS background image and default background?CSS背景图像和默认背景？
【发布时间】：2013-08-05 17:58:24
【问题描述】：

我有一个 div，它有一个背景颜色和一个图像（具有透明背景）

默认情况下，我需要在 div 上使用不同的背景颜色（白色）和另一种颜色作为透明图像的背景。

我该如何解决这个问题？

我现在已经设置了这样的背景：

background: rgb(0,0,255) url(images/trans.png);
background-repeat: repeat-x;

所以当重复停止时，我需要另一种背景颜色。

我曾考虑将渐变作为背景，但我不知道如何通过固定像素位置的过渡来做到这一点（适用于 %）

here i got the JSFiddle

【问题讨论】：

提供一个 JsFiddle 链接和你的代码。

标签： background background-image css

【解决方案1】：

您可以写像素而不是百分比：更新：更接近的纯色示例：

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -moz-linear-gradient(top, rgb(0,0,255) 0px, rgb(0,0,255) 154px, rgba(255,255,255,0.5) 155px, rgba(255,255,255,0.5) 300px);

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgb(0,0,255)),color-stop(154px,rgb(0,0,255)),color-stop(155px,rgba(255,255,255,0.5)), color-stop(300px,rgba(255,255,255,0.5)));

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -webkit-linear-gradient(top, rgb(0,0,255) 0px,rgb(0,0,255) 155px,rgba(255,255,255,0.5) 155px,rgba(255,255,255,0.5) 300px);

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -o-linear-gradient(top, rgb(0,0,255) 0px,rgb(0,0,255) 154px,rgba(255,255,255,0.5) 155px,rgba(255,255,255,0.5) 300px);

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, -ms-linear-gradient(top, rgb(0,0,255) 0px,rgb(0,0,255) 154px,rgba(255,255,255,0.5) 155px,rgba(255,255,255,0.5) 300px);

background: url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat-x 0 0, linear-gradient(to bottom, rgb(0,0,255) 0px,rgb(0,0,255) 154px,rgba(255,255,255,0.5) 155px,rgba(255,255,255,0.5) 300px);

http://jsfiddle.net/pBVsD/12/

【讨论】：

我不是想让渐变透明，它是透明的图像，你通过图像看到渐变，看我的小提琴
嗯，这只是一个例子。您可以使用纯色渐变。问题是您可以使用像素来指定渐变大小
我明白，但每次我尝试添加渐变时，图像都会丢失。如果你能为我的小提琴提供修复，那就太棒了。尝试了多次（将在上面添加我的尝试之一）
现在检查一下，它是一样的，但你的 rgb(0,0,255) 颜色。
顺序很重要的原因是：如果您使用渐变和图像，则同时使用两个不同的背景。这是CSS3的一个新特性，在同一个上指定颜色和图像是不一样的。如果你意识到这一点，你用昏迷将它们分开（你不使用颜色）。使用多个背景时，按照你写的顺序从上到下显示，你可以使用你想要的数字。