css能实现背景渐变颜色吗,不能用图片,只能用颜色,谢谢各位高手给个答案!
兼容多浏览器就要为每一个浏览器写对应的 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 下测试结果均如图片显示。
<!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>