css能实现背景渐变颜色吗,不能用图片,只能用颜色,谢谢各位高手给个答案!

 我来答
马后雷鼓下扬州5058
推荐于2016-02-01 · TA获得超过4321个赞
知道小有建树答主
回答量:693
采纳率:33%
帮助的人:808万
展开全部

兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景。

下面是当前五大浏览器对 gradient 的支持

<style type="text/css" media="screen">

#gradient {

width: 200px;

height: 200px;

/* 如果浏览器不支持渐变,使用图像作为背景 */

background: url(gradient.jpg);

/* Webkit: Safari 4-5, Chrome 1-9 */

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900));

/* Webkit: Safari 5.1+, Chrome 10+ */

background: -webkit-linear-gradient(top, #ff6600, #339900);

/* Firefox 3.6+ */

background: -moz-linear-gradient(top, #ff6600, #339900);

/* Opera 11.10+ */

background: -o-linear-gradient(top, #ff6600, #339900);

/* IE 10 */

background: -ms-linear-gradient(top, #ff6600, #339900);

/* IE < 10 */

/* 注意:这一行必须写在最后 */

FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);}

</style>

<div id="gradient"></div>

我在 IE6,IE8,FF3.6,FF 4,Chrome 12,Opera 11.11,Safari 5.0.5 下测试结果均如图片显示。

zwjtk
2011-08-10 · TA获得超过1741个赞
知道小有建树答主
回答量:300
采纳率:82%
帮助的人:210万
展开全部
瞧瞧这个例子:兼容IE6、7、8,Firefox,Chrome等,希望对你有帮助,祝你好运~~

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3.0+IE filter渐变</title>
<style type="text/css">
.bg{
width:600px;
height:400px;
border:1px solid #000;
color:#fff;

background:blue; /* 备用属性,当浏览器不支持渐变时,背景蓝色 */
background:-moz-linear-gradient(top,blue,red); /* 火狐渐变 */
background:-webkit-gradient(linear,0 0,0 100%,from(blue),to(red));/* Chrome,Safari渐变 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='blue', endColorstr='red'); /* IE6,IE7渐变 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='blue', endColorstr='red')"; /* IE8渐变 */
}
</style>
</head>
<body>
<div class="bg">中文,英文,字符,字符串,变量,常量<br>对象,类,面向对象<br>弱类型</div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
peichengman
2011-08-11
知道答主
回答量:46
采纳率:0%
帮助的人:13.2万
展开全部
谢谢,学习了。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式