html - 我可以使用 CSS 将径向渐变“叠加”设置为 div 吗？

Question

这是我用来在我的网站上为 div 提供径向渐变“白光”效果的图像示例。

目前该图像被设置为 div 背景 - 它大约 338KB 大，这在网络术语中是不可接受的。它非常大！

假设我的 div 有类似的东西：

.my-div {
    background-color: darkblue;
}

我可以应用径向背景将这种白色覆盖在上面以达到类似的效果吗？

我不打算支持 IE9 和更低版本，所以任何适用于现代浏览器和现代移动浏览器的东西对于我的用例来说都是 A-OK。

Answer 1

试试彩色斯拉。这是一个radial gradient用 CSS3 制作的例子

http://jsfiddle.net/JRUnr/73/

Answer 2

如果您只为现代浏览器设计，您可以通过如下所示的简单方式创建 CSS 渐变。

.block {
  width: 400px;
  height: 300px;
}

.gradient {
  background: rgb(56,68,75);
  background: radial-gradient(circle, rgba(56,68,75,1) 0%, rgba(35,43,48,1) 100%); 
}

<div class="gradient block"></div>