0

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

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

我怎么解决这个问题？

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

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

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

我曾考虑将渐变作为背景，但我不知道如何在固定像素 pos 处进行过渡（与 % 一起使用）

在这里我得到了 JSFiddle

4

1 回答 1

3

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

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/

于 2013-08-05T09:39:25.320 回答