CSS径向渐变作为模态叠加背景,如Apple的

时间:2011-02-26 06:47:19

标签: css radial-gradients

我似乎无法做对。我想要一个类似于Apple的径向渐变叠加层,但我所做的一切似乎都很接近。我希望中心圆的半径为25%,但是可以达到350px半径。

1 个答案:

答案 0 :(得分:0)

他们这样做,但我看到较新的版本用户<canvas>。 请注意,对于IE或Opera,您需要一个透明的png(不包括在下面的css代码中)

HTML:

<html>
<head>
    <link rel="stylesheet" href="gogo.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body class=" bg">
<div class="radialbg">
HEELO WORLD
</div>
</body>
</html>

CSS:

body {
    margin: 0;
    padding: 0;
}

.bg {
    background: url(pattern.jpeg) repeat;
}

.radialbg {
    background: transparent -webkit-gradient(radial, center center, 50, center center, 460, from(transparent), to(#000));
    background: -moz-radial-gradient(circle, transparent, #000);
    width: 100%;
    height: 100%;
}