0

我见过一百万人这样做，但我无法让它发挥作用。

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 进行定位：

<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);
    }

在 body 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);
4

2 回答 2

1

为什么不先有一个带有背景渐变的 div，然后再有一个带有背景图像的 div。如果背景图像是具有透明度的 .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-05T19:38:17.370 回答
0

如前所述，请确保您在 Safari 或旧版 Chrome 中检查您的内容。他们都使用(d) webkit 作为渲染引擎。

于 2013-08-05T19:45:21.497 回答