css背景渐变兼容性问题解决

最新推荐文章于 2022-01-13 15:10:48 发布

had_meno

最新推荐文章于 2022-01-13 15:10:48 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/had_meno/article/details/52774995

版权

背景渐变：

background:linear-gradient(top,red,yellow);

渐变方向可用：top,left,top left,top right等等。

top指从上至下渐变（纵向渐变），如图

left指从左至右渐变（横向渐变），如图

top left指左上至右下渐变，如图

top right指右上至左下渐变，如图

渐变的颜色：可以直接使用英文单词，也可以运用#ffffff这种写法，ps这种写法注意要写全，而不用简写，以免兼容性问题。

兼容各种浏览器：

background:-moz-linear-gradient(top,red,yellow);
	   background:-webkit-linear-gradient(top,red,yellow);
	   background:-ms-linear-gradient(top right,red,yellow);
	   background:linear-gradient(top,red,yellow);
	   -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=red, endColorstr=yellow)";
	   +background:#FFB400;

兼容各种内核的浏览器，在linear-gradient前加各种内核的名称。

-moz代表firefox浏览器私有属性，-ms代表ie浏览器私有属性，-webkit代表safari、chrome私有属性。

-ms-filter则是为了兼容IE8,9，运用滤镜，并加上前缀；gradientType=1代表横向渐变，gradientType=0代表纵向淅变，startColorstr代表渐变起始颜色，endColorstr代表渐变终结颜色。

而最终的+background则是为了IE6,IE7而取得一种中间色，就不做兼容了。

HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	.div1{
		width:200px;
		height:200px;
		border:1px solid #333;
		background:-moz-linear-gradient(top,red,yellow);
		background:-webkit-linear-gradient(top,red,yellow);
		background:-ms-linear-gradient(top right,red,yellow);
		background:linear-gradient(top,red,yellow);
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=red, endColorstr=yellow)";
		+background:#FFB400;
	}	
</style>
</head>
<body>
	<div class="div1"></div>
</body>
</html>

另：在调试过程中，遇到IE8，9无法正常显示情况，是由以下引起，点击允许即可正常显示。

had_meno

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css背景渐变兼容性问题解决

背景渐变：background:linear-gradient(top,red,yellow);渐变方向可用：top,left,top left,top right等等。top指从上至下渐变（纵向渐变），如图left指从左至右渐变（横向渐变），如图top left指左上至右下渐变，如图top right指右上至左下渐变，如图渐变的颜色：可以直接使用英
复制链接

扫一扫