当前位置：文江博客话题详情

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

发布于 2024-10-19 02:39:54 字数 81 浏览 3 评论 0原文

我似乎无法把它做好。我想要一个类似于苹果的径向渐变叠加，但我所做的一切似乎都不太接近。我希望中心圆的半径为 25%，但最终会选择 350px 半径。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少跟Wǒ拽 2024-10-26 02:39:54

他们这样做，但我见过较新的版本使用。
请注意，对于 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%;
}

They do it like this, yet I've seen newer versions user a <canvas>.
Note that for IE or Opera, you will need a transparent png (not included in the css code below)

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

回复收藏 0 原文

~没有更多了~