我有一个具有背景颜色和图像(具有透明背景)的div
默认情况下,我需要在div上使用不同的背景颜色(白色),并使用另一种颜色作为透明图像的背景。
我怎么解决这个问题?
我现在已经设置了这样的背景:
background: rgb(0,0,255) url(images/trans.png);
background-repeat: repeat-x;
因此,当重复停止时,我将需要另一种背景色。
我以渐变为背景,但不知道如何在固定像素pos处进行过渡(与%配合使用)
here i got the JSFiddle
最佳答案
您可以写像素而不是百分比:
更新:更接近示例的纯色:
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/
关于background - CSS背景图片和默认背景?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18054528/