我已经看到有一百万人这样做了,但我无法让它发挥作用。
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;
在body元素的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:
我在其中使用带有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);
答案 0 :(得分:1)
为什么不使用背景渐变的div,然后使用背景图像生成另一个div。如果背景图片是具有透明度的.png或者没有填充div,您将能够看到它背后的渐变。
e.g。
<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/
答案 1 :(得分:0)
如上所述,请确保您在Safari或较旧版本的Chrome中检查您的内容。他们都使用(d)webkit作为渲染引擎。