css 背景色渐变---和背景色透明
2015-06-09 09:32
169 查看
1 背景色渐变
2 背景色 透明
还有背景色rgb的最后一个变量是可以控制透明度的。
3 ie渐变
参考网址:http://www.qttc.net/201304316.html;
CSS3新加特性gradient可以实现背景颜色,鉴于各浏览器之间还有兼容性因此这里只说线性渐变,其它渐变就算是有也不敢贸然使用。
linear 表示线性,参数top表示从顶部开始,参数#eee表示开始颜色,#aaa表示结束颜色
效果:
linear 表示线性、0 0 表示开始位置的x与y的位置,0 100%表示结束的x与y位置,from(#eee)表示从这个颜色开始,to(#aaa)表示渐变到这个颜色
Chrome:
Safari:
同Mozilla一样用法,只不过前缀-moz修改成-o即可
效果:
#eeeeee 0% 表示从什么颜色位置开始,#aaaaaa 100%表示到什么颜色以及结束位置
IE9:
IE10:
IE7代码:
startColorstr开始颜色,endColorstr结束颜色,grandientType渐变方向
IE7效果:
IE8代码:
参数同IE7类似,只不过在filter加了一个-ms-前缀
IE8效果:
但为了要一个通用的背景渐变要写六行代码,不见得比图片省事,要么也可以结合后端语言做一个功能,输入渐变的起始颜色与结束颜色后生成以上代码。
background:#fb0000; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb0000), color-stop(15%,#d50000), color-stop(75%,#c70000), color-stop(100%,#b20000)); background: -webkit-linear-gradient(top, #fb0000 0%,#d50000 15%,#c70000 75%,#b20000 100%); background: linear-gradient(to bottom, #fb0000 0%,#d50000 15%,#c70000 75%,#b20000 100%);
2 背景色 透明
{ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
还有背景色rgb的最后一个变量是可以控制透明度的。
{ background:rgb(207,0,0,0.8); }
3 ie渐变
参考网址:http://www.qttc.net/201304316.html;
CSS3新加特性gradient可以实现背景颜色,鉴于各浏览器之间还有兼容性因此这里只说线性渐变,其它渐变就算是有也不敢贸然使用。
Mozilla
仅针对FireFoxbackground: -moz-linear-gradient(top, #eee, #aaa);
linear 表示线性,参数top表示从顶部开始,参数#eee表示开始颜色,#aaa表示结束颜色
效果:
Webkit
解决:Chrome 、Safaribackground: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa));
linear 表示线性、0 0 表示开始位置的x与y的位置,0 100%表示结束的x与y位置,from(#eee)表示从这个颜色开始,to(#aaa)表示渐变到这个颜色
Chrome:
Safari:
Opera
代码:background: -o-linear-gradient(top, #eee, #aaa);
同Mozilla一样用法,只不过前缀-moz修改成-o即可
效果:
IE9 and IE 10
代码:background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);
#eeeeee 0% 表示从什么颜色位置开始,#aaaaaa 100%表示到什么颜色以及结束位置
IE9:
IE10:
IE7 and IE8
这个两个浏览器使用的事滤镜,跟CSS3没有半毛关系,只不过能在低端IE中解决这个问题也是解决兼容的一个做法,但注意不要大量使用,耗资源!IE7代码:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);
startColorstr开始颜色,endColorstr结束颜色,grandientType渐变方向
IE7效果:
IE8代码:
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);
参数同IE7类似,只不过在filter加了一个-ms-前缀
IE8效果:
整合兼容
我们把各个浏览器的背景颜色渐变都写上就解决各浏览器间的背景颜色渐变了background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); /** Chrome Safari **/background: -moz-linear-gradient(top, #eee, #aaa); /** FireFox **/
background: -o-linear-gradient(top, #eee, #aaa); /** Opear **/
background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%); /** IE9 IE10 **/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE7 **/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE8 **/
但为了要一个通用的背景渐变要写六行代码,不见得比图片省事,要么也可以结合后端语言做一个功能,输入渐变的起始颜色与结束颜色后生成以上代码。
相关文章推荐
- css骇客编码,兼容例子
- 常用的CSS代码
- 下拉列表框Spinner-采用自定义布局文件作为Spinner样式
- css3 在线编辑工具 连兼容都写好了
- css3之outline属性
- HTML第二十节(CSS制作照片墙效果与瀑布流)
- HTML+CSS样式设置——CSS一学就会
- 让navigationItem.leftBarButtonItem具有backBarButtonItem的外观样式
- HTML和CSS书写心得
- CSS--使用伪选择器制作箭头图标
- 知道一个div的宽高背景色,如何不通过写在行间样式的办法更改样式?currentStyle(只兼容ie),getComeputedStyle(兼容)-->获取非行间样式
- CSS postion 相对定位、绝对定位、固定定位
- CSS关于绝对位置与相对位置的理解
- CSS中position详解与常见应用实现
- 举例详解CSS中的cursor属性
- css布局样式属性【text-overflow】
- CSS设计之页面滚动条出现时防止页面跳动的方法
- 使用CSS时间打点的Loading效果的教程
- css div position to parent
- 通过position属性实现文本在页面中的任意位置