背景渐变与线性背景渐变

发布日期:2015-09-02 17:32:18
在没有 CSS3的时候, 如果想做一个背景渐变效果, 就得使用一个很细的渐变切片进行水平/垂直平铺。对于使用图片而言,这确实是一种很好的折中方案。一张仅有一两像素宽的图片,不会给宽带造成太大负担,而且它可以用在网站的多个元素上。

线性背景渐变
使用上面说过的技巧,来给 AND THE WINNER ISN’ T网站的侧边栏制作一个背景渐变
效果:
aside {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-left: 1.5%;
padding-right: 1.0416667%;
margin-left: 1.0416667%;
float: left;
width: 20.7083333%;
background: url(../img/sidebarBg2.png) 50% repeat-x;
}
网站设计如果想修改渐变效果,还得使用图像编辑软件。另外,内容可能因为超出固定尺寸限制
而偶尔溢出渐变背景。这个问题在响应式设计中简直无法忍受,因为我们想让页面结构
能随意改变形状(比如变高或变宽) ,但不会破坏设计效果。
例如,假设我想给侧边栏中的每个模块再追加两部电影。
效果不是太差,但灰色渐变没有按照我喜欢的那样覆盖整个侧边栏。这时我又不得不回
到图像编辑软件中重新制作渐变图片。如果使用 CSS3渐变,就会灵活很多。用纯 CSS3
就可以做出和上面一样的渐变,而且不用图片,代码如下:
background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
不论这块区域有多高(毕竟,评分差不多的好电影和烂电影有很多) ,CSS3 渐变始终能
覆盖整个区域。
背景渐变唯一美中不足的是它不像其他一些 CSS3 特性那样被广泛支持。比如 IE 9 就没
有对它的原生支持(微软承诺在 IE 10中支持) 。其他大多数浏览器都支持背景渐变,不
过都是以私有前缀方式。不过这并不足以阻止你使用该特性来增强设计效果,因为有很
多浏览器现在已经支持该特性,而剩下的浏览器在不久的将来也会支持。作为老版本浏
览器的降级方案,最好先定义一个固定背景颜色,这样老版本浏览器在无法识别渐变规
则的时候,至少会渲染出一个实色的背景。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计