今天小编跟大家讲解下有关CSS控制图片、表格、背景颜色渐变示例 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS控制图片、表格、背景颜色渐变示例 的相关资料,希望小伙伴们看了有所帮助。
CSS Filter 是 IE 特有的技术 其他浏览器均不支持 所以为了最大的兼容性及标准化 应尽量避免为 IE 单独使用 Filter 如需要其某些特效 应同时考虑其他浏览器 图片渐变 复制代码代码如下: <img src="https://www.aidi.net.cn//css/..."width=400 height=300 style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)"> 表格渐变 复制代码代码如下: <table style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=0,finishY=100); BACKGROUND-COLOR: #ff0000"> <tr><td>12345678901234567890</td></tr></table> 背景渐变 复制代码代码如下: .bgjb{ background:-webkit-gradient(linear,left,right,from(#BDD4FD) ,to(#FFFFFF)); background:-moz-linear-gradient(left,#BDD4FD,#FFFFFF,); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD4FD, endColorstr=#FFFFFF,GradientType=1 ); }/*同时考虑其他浏览器 <div class="bgjb"></div> <body style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); BACKGROUND-COLOR: skyblue"> <body leftmargin="0"topmargin="0"marginwidth="0"marginheight="0"style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)"> <body leftmargin="0"topmargin="0"marginwidth="0"marginheight="0"style="FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)"> <div style="width:66;height:100%;float:left;FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div> <div style="width:66;height:100%;float:left;FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=1,startColorStr=#ffffFF,endColorStr=#46B5FF)"></div> <div style="width:66;height:100%;float:right;FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=1,startColorStr=#ffffff,endColorStr=#46B5FF)"></div> <div style="width:66;height:100%;float:right;FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div> 若要使表格里面的元素不受影响 给里面的元素加上style="position:relative;"属性, 这样就不受影响了例如: 复制代码代码如下: [html] <div style="width:200px;height:200px;filter: Alpha(opacity=10);background-color:red;"> <div style="position:relative;">123123</div> </div> [/html]来源:爱蒂网