当谈到渐变时,我们有很多选项可供选择: 1- Css3 2- SVG 3- 图像可能还有更多选项,但这些是最常见的。如果渐变是线性渐变,那么它在 IE 旧版本中会优雅地降级,但这里我所说的是用 css3 制作的径向渐变。这是它的CSS:
background: #7d7e7d;
background: -moz-radial-gradient(center, ellipse cover, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
background: -webkit-radial-gradient(center, ellipse cover, #7d7e7d 0%,#0e0e0e 100%);
background: -o-radial-gradient(center, ellipse cover, #7d7e7d 0%,#0e0e0e 100%);
background: -ms-radial-gradient(center, ellipse cover, #7d7e7d 0%,#0e0e0e 100%);
background: radial-gradient(center, ellipse cover, #7d7e7d 0%,#0e0e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 );
对于现场演示,您可以看到此页面http://bloghutsbeta.blogspot.com/
现在我正在寻求解决这个问题的方法,就像您在 IE 中看到演示页面一样,您可以看到径向渐变的显示方式并不好。如果我使用尺寸太大的图像,我无法承受大于 5KB 的图像。如果我使用 SVG,那么我们都知道它在浏览器中的支持。一个好的建议将不胜感激。