当前位置：首页 → 问答吧 → chrome的CSS3多重背景如何写？

chrome的CSS3多重背景如何写？

时间：2011-04-05

来源：互联网

chrome环境，想在一个元素中实现同时使用渐变和背景图片，应该如何写呢？我是这样写的，但是不起作用，是不是chrome不支持啊？

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#ddd)), url(../img/bg.gif);
background-repeat:no-repeat;
background-position:top left;

这样写只有渐变效果，但背景图片不显示，请专家指教，谢谢！

作者: ambushaa 发布时间: 2011-04-05

换一下image顺序

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>cssass.com</title> </head> <style> .box{ height:200px; background: url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png) 100% 100% no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#ddd)); /* webkit老式写法 */ background:url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png) 100% 100% no-repeat,-moz-linear-gradient(0, #f5f5f5, #ddd); /* moz写法 */ background:url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png) 100% 100% no-repeat,-webkit-linear-gradient(0, #c00, #ddd); /* webkit新式写法 */ } </style> <body> <div class='box'> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: ONEBOYS 发布时间: 2011-04-05

chrome的CSS3多重背景如何写？

热门阅读

热门下载