CSS-背景渐变的兼容写法

简介: background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
linear-gradient:to 方位词
-前缀-linear-gradient:方位词


最近在做的项目中用到的实例(2016-12-13 13:53:11)
background: -webkit-linear-gradient(bottom, #fba555, #ffed6c 75%);
background: -moz-linear-gradient(bottom, #fba555, #ffed6c 75%);
background: -ms-linear-gradient(bottom, #fba555, #ffed6c 75%);
background: -o-linear-gradient(bottom, #fba555, #ffed6c 75%);
background: linear-gradient(to top, #fba555, #ffed6c 75%);

 

20180307 补充代码:

qq浏览器效果如下:

ie8浏览器效果如下:

html

 
<div class="zhang1"></div>
<div class="zhang2"></div>
<div class="myself1"></div>
<div class="myself2"></div>
<div class="myself3"></div>
<div class="myself4"></div>
 

css

div{
            height: 50px;
            width: 1000px;
            margin: 20px auto;
            border-radius: 30px;
        }
        .zhang1{
            height: 80px;
        background:red; /* 一些不支持背景渐变的浏览器 */  
            filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
        -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);/*IE8 gradientType=1代表横向渐变,gradientType=0代表纵向淅变。*/    
        background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  
        background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
        }
        .zhang2{
            filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
        -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/    
        background:red; /* 一些不支持背景渐变的浏览器 */  
        background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  
        background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
        }
        .myself1{
            background: #779DFF;
            filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#779DFF,endcolorstr=#1E47B1,gradientType=1);/*IE8*/
        -ms-filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#779DFF,endcolorstr=#1E47B1,gradientType=1);/*IE8*/
            background: -webkit-linear-gradient(left, #779DFF, #1E47B1 100%);
            background: -moz-linear-gradient(left, #779DFF, #1E47B1 100%);
            background: -ms-linear-gradient(left, #779DFF, #1E47B1 100%);
            background: -o-linear-gradient(left, #779DFF, #1E47B1 100%);
            background: linear-gradient(to right, #779DFF, #1E47B1 100%);
        }
        .myself2{
            background: #4574EF;
            filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#4574EF,endcolorstr=#0C3399,gradientType=1);/*IE8*/
        -ms-filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#4574EF,endcolorstr=#0C3399,gradientType=1);/*IE8*/
            background: -webkit-linear-gradient(left, #4574EF, #0C3399 100%);
            background: -moz-linear-gradient(left, #4574EF, #0C3399 100%);
            background: -ms-linear-gradient(left, #4574EF, #0C3399 100%);
            background: -o-linear-gradient(left, #4574EF, #0C3399 100%);
            background: linear-gradient(to right, #4574EF, #0C3399 100%);
        }
        .myself3{
            background: #9E42C7;
            filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#9E42C7,endcolorstr=#650E8D,gradientType=1);
        -ms-filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#9E42C7,endcolorstr=#650E8D,gradientType=1);IE8 
            background: -webkit-linear-gradient(left, #9E42C7, #650E8D 100%);
            background: -moz-linear-gradient(left, #9E42C7, #650E8D 100%);
            background: -ms-linear-gradient(left, #9E42C7, #650E8D 100%);
            background: -o-linear-gradient(left, #9E42C7, #650E8D 100%);
            background: linear-gradient(to right, #9E42C7, #650E8D 100%);
        }
        .myself4{
            background: #D33B76;
            filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#D33B76,endcolorstr=#8D094D,gradientType=1);
        -ms-filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#D33B76,endcolorstr=#8D094D,gradientType=1);/*IE8 */    
            background: -webkit-linear-gradient(left, #D33B76, #8D094D 100%);
          background: -moz-linear-gradient(left, #D33B76, #8D094D 100%);
            background: -ms-linear-gradient(left, #D33B76, #8D094D 100%);
            background: -o-linear-gradient(left, #D33B76, #8D094D 100%);
            background: linear-gradient(to right, #D33B76, #8D094D 100%);
        }

 

张鑫旭教程

 

 
目录
相关文章
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
244 4
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
415 0
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
156 1
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
178 1
|
前端开发
CSS背景
【5月更文挑战第3天】CSS背景。
116 8
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
204 2
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
160 2
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
277 1

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式