如何同时使用CSS3渐变和背景图片

我已经看到有100万人在使用它，但是我一直无法使其工作。如何同时使用CSS3渐变和背景图片

background: -webkit-linear-gradient(left top, black, #333333 85%, gray), url('/img/helix.png');

我已经尝试了颠倒的顺序和背景图像，仍然没有。

我看到一个人使用：

body:before { 
content: " "; 
width: 100%; 
height: 100%; 
position: absolute; 
z-index: -1; 
top: 0; 
left: 0; 
background: -webkit-linear-gradient(left top, black, #333333 85%, gray); 
}

但是，必须有一个更好的办法...

更新代码：

在对图像的DIV ID：

height: 100%; 
width: 100%; 
background: transparent url('/img/helix-white.png') no-repeat;

在正文元素的CSS中：

background: -webkit-linear-gradient(left top, black, #333333 85%, gray); 
background: -moz-linear-gradient(left top, black, #333333 85%, gray); 
background: -ms-linear-gradient(left top, black, #333333 85%, gray); 
background: -o-linear-gradient(left top, black, #333333 85%, gray); 
background: linear-gradient(left top, black, #333333 85%, gray);

更新2：

我用与图像一个div在它与CSS定位：

<div id="backgroundImage"> 
    <img src="img/helix-white.png" alt=" " /> 
    </div> 


#backgroundImage 
    { 
     position: fixed; 
     bottom: 10%; 
     left: 7%; 

     opacity:0.4; 
     filter:alpha(opacity=40); 

     -webkit-transform: rotateZ(20deg); 
     -moz-transform: rotateZ(20deg); 
     -ms-transform: rotateZ(20deg); 
     -o-transform: rotateZ(20deg); 
     transform: rotateZ(20deg); 
    }

在体内CSS用于梯度：

height: 100%; 

background: -webkit-linear-gradient(left top, black, #333333 85%, gray); 
background: -moz-linear-gradient(left top, black, #333333 85%, gray); 
background: -ms-linear-gradient(left top, black, #333333 85%, gray); 
background: -o-linear-gradient(left top, black, #333333 85%, gray); 
background: linear-gradient(left top, black, #333333 85%, gray);

来源

2013-08-05 Blake

http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients –

我试过了，仍然没有显示图像。只是渐变。我知道该网址是正确的。 – Blake

为什么不用背景渐变的div然后另一个div insi德与背景图像。如果背景图像是带有透明度的.png或不填充div，则可以看到背后的渐变。

例如

<div id="gradient"> 
    <div id="image"> 
    Your content here. 
    </div> 
</div>

CSS

#gradient { 
    background: -webkit-linear-gradient(left top, black, #333333 85%, gray); } 

#image { 
    background: transparent url('your image here') center center no-repeat; }

在另一方面，你应该使用全方位的梯度选项来支持所有浏览器（不只是WebKit的）。我建议使用CSS3渐变发生器代码： http://www.colorzilla.com/gradient-editor/

来源

2013-08-05 19:38:17 Coop

由于某些原因，仍然无法工作。我将用新代码更新问题。 – Blake

如上所述，确保您正在Safari或旧版Chrome中检查您的东西。他们都使用（d）webkit作为渲染引擎。

来源

2013-08-05 19:45:21

如何同时使用CSS3渐变和背景图片

回答

相关问题