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.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：方位词

时间： 2024-08-10 23:29:59

CSS-背景渐变的兼容写法的相关文章

CSS设置DIV背景色渐变显示--针对不同浏览器，背景渐变的兼容问问题

针对不同浏览器,背景渐变的兼容问问题! background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */ background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ background:

线性渐变的兼容写法

线性渐变的兼容写法如下: .gradient{ background: #000000; background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gr

CSS 背景图拉伸兼容 FF Chrome IE 等主流浏览器(转)

注:本文欢迎转载,以下为本人亲测,转载请注明:http://blog.csdn.net/wqmain/article/details/8844286 相信各位一定碰到过这种情况,按钮作为DIV的背景图来显示,实际上有多个这样的按钮,而且DIV中的文字,也就是按钮上要显示的文字内容和个数都不定,这种情况下就需要用背景图片拉伸效果来处理了,只需做一个按钮图片,作为DIV的背景图时随着DIV的宽度或高度自适应就OK了.网上也找过,但不兼容IE或有bug,下面贴出本人亲测代码,兼容主流浏览器,包括F

css背景渐变

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#f2f2f2); /*IE旧版本*/ background: -ms-linear-gradient(top,#ffffff,#f2f2f2);/* IE 10 */ background:-moz-linear-gradient(top,#ffffff,#f2f2f2);/*火狐*/ backg

CSS——背景渐变

在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧.从右侧到左侧.从顶部到底部.从底部到顶部或着沿任何任意轴.如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生. 兼容性问题很严重,我们这里之讲解线性渐变语法格式: background:-webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色): background:-webkit-linear-gradient(渐变的起始位置, 颜色位置, 颜色位置....): 原文地址:htt

（转）css 背景色渐变兼容写法

css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linea

CSS3：用CSS设置多个背景、背景渐变、指定背景大小

http://blog.csdn.net/net_lover/article/details/5212026 CSS3规范中对背景这一部分,新加入了一些令人兴奋的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性有: 属性名可能的值默认值 background 是一种简写方式:bg-image || bg-position || / bg-size || repeat-style || attachment || bg-origin,最后一个背景

背景渐变兼容IE

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CSS 实现元素背景渐变</title> <style> .demo { width:100%; height:200px; border:solid 1px #213c7c; background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7),

CSS背景图拉伸自适应尺寸，全浏览器兼容

突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉伸这个问题产生时,CSS3也只是浮云.... 对于IE而言网上常见的方法是使用CSS滤镜,但那时Firefox还小,Chrome还没出生,IE称霸天下.....但如今,我们用三四行简短的代码就能实现全浏览器兼容的方法: .bg{ background:url(http://wyz.67ge.com/